|
8 | 8 | </head>
|
9 | 9 | <body>
|
10 | 10 | <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 |
12 | 12 | </div>
|
13 | 13 |
|
14 | 14 | <script type="x-shader/x-vertex" id="vertexShader">
|
|
32 | 32 |
|
33 | 33 | varying vec3 vCenter;
|
34 | 34 |
|
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 |
| - |
76 | 35 | void main() {
|
77 | 36 |
|
78 | 37 | vec3 afwidth = fwidth( vCenter.xyz );
|
79 | 38 |
|
80 |
| - vec3 edge3 = smoothstep( thickness * afwidth, ( thickness + 1.0 ) * afwidth, vCenter.xyz ); |
| 39 | + vec3 edge3 = smoothstep( ( thickness - 1.0 ) * afwidth, thickness * afwidth, vCenter.xyz ); |
81 | 40 |
|
82 | 41 | float edge = 1.0 - min( min( edge3.x, edge3.y ), edge3.z );
|
83 | 42 |
|
|
100 | 59 | thickness: 1
|
101 | 60 | };
|
102 | 61 |
|
103 |
| - let renderer, scene, camera, mesh2, mesh3; |
| 62 | + let renderer, scene, camera, mesh2; |
104 | 63 |
|
105 | 64 | init();
|
106 | 65 |
|
|
137 | 96 | } );
|
138 | 97 |
|
139 | 98 | const mesh1 = new THREE.Mesh( geometry, material1 );
|
140 |
| - mesh1.position.set( - 60, 0, 0 ); |
| 99 | + mesh1.position.set( - 40, 0, 0 ); |
141 | 100 |
|
142 | 101 | scene.add( mesh1 );
|
143 | 102 |
|
144 |
| - // middle |
| 103 | + // right |
145 | 104 |
|
146 | 105 | const material2 = new THREE.ShaderMaterial( {
|
147 | 106 |
|
148 | 107 | uniforms: { 'thickness': { value: API.thickness } },
|
149 | 108 | vertexShader: document.getElementById( 'vertexShader' ).textContent,
|
150 | 109 | 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" |
152 | 112 |
|
153 | 113 | } );
|
154 | 114 | material2.extensions.derivatives = true;
|
155 | 115 |
|
156 | 116 | mesh2 = new THREE.Mesh( geometry, material2 );
|
157 |
| - mesh2.position.set( 0, 0, 0 ); |
| 117 | + mesh2.position.set( 40, 0, 0 ); |
158 | 118 |
|
159 | 119 | scene.add( mesh2 );
|
160 | 120 |
|
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 |
| - |
179 | 121 | //
|
180 | 122 |
|
181 | 123 | animate();
|
|
186 | 128 |
|
187 | 129 | const gui = new GUI();
|
188 | 130 |
|
189 |
| - gui.add( API, 'thickness', 0.4, 4 ).onChange( function () { |
| 131 | + gui.add( API, 'thickness', 0, 4 ).onChange( function () { |
190 | 132 |
|
191 | 133 | mesh2.material.uniforms.thickness.value = API.thickness;
|
192 |
| - mesh3.material.uniforms.thickness.value = API.thickness; |
193 | 134 |
|
194 | 135 | } );
|
195 | 136 |
|
|
0 commit comments