Skip to content

Commit 9f4be87

Browse files
authored
Examples: Removed old wireframe shader (mrdoob#21410)
* Examples: Removed old wireframe shader. * Examples: Adjusted thickness in wireframe example.
1 parent dba2260 commit 9f4be87

File tree

2 files changed

+9
-68
lines changed

2 files changed

+9
-68
lines changed
Loading

examples/webgl_materials_wireframe.html

Lines changed: 9 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<div id="info">
11-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl wireframe demo
11+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - materials - wireframe
1212
</div>
1313

1414
<script type="x-shader/x-vertex" id="vertexShader">
@@ -32,52 +32,11 @@
3232

3333
varying vec3 vCenter;
3434

35-
float edgeFactorTri() {
36-
37-
vec3 d = fwidth( vCenter.xyz );
38-
39-
vec3 a3 = smoothstep( vec3( 0.0 ), d * thickness, vCenter.xyz );
40-
41-
return min( min( a3.x, a3.y ), a3.z );
42-
43-
}
44-
45-
void main() {
46-
47-
if ( edgeFactorTri() > 0.99 ) discard;
48-
49-
gl_FragColor = gl_FrontFacing ? vec4( 0.9, 0.9, 1.0, 1.0 ) : vec4( 0.4, 0.4, 0.5, 1.0 );
50-
51-
}
52-
53-
</script>
54-
55-
<script type="x-shader/x-vertex" id="vertexShaderATC">
56-
57-
attribute vec3 center;
58-
varying vec3 vCenter;
59-
60-
void main() {
61-
62-
vCenter = center;
63-
64-
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
65-
66-
}
67-
68-
</script>
69-
70-
<script type="x-shader/x-fragment" id="fragmentShaderATC">
71-
72-
uniform float thickness;
73-
74-
varying vec3 vCenter;
75-
7635
void main() {
7736

7837
vec3 afwidth = fwidth( vCenter.xyz );
7938

80-
vec3 edge3 = smoothstep( thickness * afwidth, ( thickness + 1.0 ) * afwidth, vCenter.xyz );
39+
vec3 edge3 = smoothstep( ( thickness - 1.0 ) * afwidth, thickness * afwidth, vCenter.xyz );
8140

8241
float edge = 1.0 - min( min( edge3.x, edge3.y ), edge3.z );
8342

@@ -100,7 +59,7 @@
10059
thickness: 1
10160
};
10261

103-
let renderer, scene, camera, mesh2, mesh3;
62+
let renderer, scene, camera, mesh2;
10463

10564
init();
10665

@@ -137,45 +96,28 @@
13796
} );
13897

13998
const mesh1 = new THREE.Mesh( geometry, material1 );
140-
mesh1.position.set( - 60, 0, 0 );
99+
mesh1.position.set( - 40, 0, 0 );
141100

142101
scene.add( mesh1 );
143102

144-
// middle
103+
// right
145104

146105
const material2 = new THREE.ShaderMaterial( {
147106

148107
uniforms: { 'thickness': { value: API.thickness } },
149108
vertexShader: document.getElementById( 'vertexShader' ).textContent,
150109
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
151-
side: THREE.DoubleSide
110+
side: THREE.DoubleSide,
111+
alphaToCoverage: true // only works when WebGLRenderer's "antialias" is set to "true"
152112

153113
} );
154114
material2.extensions.derivatives = true;
155115

156116
mesh2 = new THREE.Mesh( geometry, material2 );
157-
mesh2.position.set( 0, 0, 0 );
117+
mesh2.position.set( 40, 0, 0 );
158118

159119
scene.add( mesh2 );
160120

161-
// right
162-
163-
const material3 = new THREE.ShaderMaterial( {
164-
165-
uniforms: { 'thickness': { value: API.thickness } },
166-
vertexShader: document.getElementById( 'vertexShaderATC' ).textContent,
167-
fragmentShader: document.getElementById( 'fragmentShaderATC' ).textContent,
168-
side: THREE.DoubleSide,
169-
alphaToCoverage: true // only works when WebGLRenderer's "antialias" is set to "true"
170-
171-
} );
172-
material3.extensions.derivatives = true;
173-
174-
mesh3 = new THREE.Mesh( geometry, material3 );
175-
mesh3.position.set( 60, 0, 0 );
176-
177-
scene.add( mesh3 );
178-
179121
//
180122

181123
animate();
@@ -186,10 +128,9 @@
186128

187129
const gui = new GUI();
188130

189-
gui.add( API, 'thickness', 0.4, 4 ).onChange( function () {
131+
gui.add( API, 'thickness', 0, 4 ).onChange( function () {
190132

191133
mesh2.material.uniforms.thickness.value = API.thickness;
192-
mesh3.material.uniforms.thickness.value = API.thickness;
193134

194135
} );
195136

0 commit comments

Comments
 (0)