Merge pull request #16952 from WestLangley/dev_wireframe_example

Examples: Improve wireframe example

Author: Mugen87

examples/webgl_materials_wireframe.html

@@ -19,6 +19,7 @@
 			void main() {
 
 				vCenter = center;
+
 				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
 			}
@@ -27,20 +28,26 @@
 
 		<script type="x-shader/x-fragment" id="fragmentShader">
 
+			uniform float widthFactor;
+
 			varying vec3 vCenter;
 
 			float edgeFactorTri() {
 
 				vec3 d = fwidth( vCenter.xyz );
-				vec3 a3 = smoothstep( vec3( 0.0 ), d * 1.5, vCenter.xyz );
+
+				vec3 a3 = smoothstep( vec3( 0.0 ), d * widthFactor, vCenter.xyz );
+
 				return min( min( a3.x, a3.y ), a3.z );
 
 			}
 
 			void main() {
 
-				gl_FragColor.rgb = mix( vec3( 1.0 ), vec3( 0.2 ), edgeFactorTri() );
-				gl_FragColor.a = 1.0;
+				if ( edgeFactorTri() > 0.99 ) discard;
+
+				gl_FragColor = gl_FrontFacing ? vec4( 0.9, 0.9, 1.0, 1.0 ) : vec4( 0.4, 0.4, 0.5, 1.0 );
+
 			}
 
 		</script>
@@ -49,86 +56,95 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			var API = {
+				widthFactor: 1
+			};
+
+			var renderer, scene, camera, mesh1, mesh2;
 
 			init();
-			animate();
 
 			function init() {
 
-				var geometry, material, mesh;
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
 
-				var size = 150;
+				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 800;
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 500 );
+				camera.position.z = 150;
 
-				scene = new THREE.Scene();
+				new THREE.BufferGeometryLoader().load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
 
-				//
+					// on the left
 
-				geometry = new THREE.BoxBufferGeometry( size, size, size );
-				material = new THREE.MeshBasicMaterial( { wireframe: true } );
+					var material = new THREE.MeshBasicMaterial( {
 
-				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = - 150;
-				scene.add( mesh );
+						color: 0xe0e0ff,
+						wireframe: true
 
-				//
+					} );
 
-				geometry = new THREE.BoxBufferGeometry( size, size, size );
-				geometry = geometry.toNonIndexed();
+					mesh1 = new THREE.Mesh( geometry, material );
+					mesh1.position.set( - 40, 0, 0 );
 
-				setupAttributes( geometry );
+					scene.add( mesh1 );
 
-				material = new THREE.ShaderMaterial( {
-					uniforms: {},
-					vertexShader: document.getElementById( 'vertexShader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
-				} );
+					// on the right
 
-				material.extensions.derivatives = true;
+					var uniforms = { 'widthFactor': { value: API.widthFactor } };
 
-				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = 150;
-				scene.add( mesh );
+					var material = new THREE.ShaderMaterial( {
 
-				//
+						uniforms: uniforms,
+						vertexShader: document.getElementById( 'vertexShader' ).textContent,
+						fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+						side: THREE.DoubleSide
 
-				geometry = new THREE.SphereBufferGeometry( size / 2, 32, 16 );
-				geometry = geometry.toNonIndexed();
+					} );
 
-				setupAttributes( geometry );
+					material.extensions.derivatives = true;
+
+					geometry.removeAttribute( 'normal' );
+					geometry.removeAttribute( 'uv' );
+
+					setupAttributes( geometry );
+
+					mesh2 = new THREE.Mesh( geometry, material );
+					mesh2.position.set( 40, 0, 0 );
+
+					scene.add( mesh2 );
+
+					//
+
+					animate();
 
-				material = new THREE.ShaderMaterial( {
-					uniforms: {},
-					vertexShader: document.getElementById( 'vertexShader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 				} );
 
-				material.extensions.derivatives = true;
+				//
 
-				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = - 150;
-				scene.add( mesh );
+				var gui = new GUI();
 
-				// renderer
+				gui.add( API, 'widthFactor', 0.4, 4 ).onChange( function () {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
+					mesh2.material.uniforms.widthFactor.value = API.widthFactor;
 
-				// events
+				} );
+
+				gui.open();
+
+				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
 			function setupAttributes( geometry ) {
 
-				// TODO: Bring back quads
-
 				var vectors = [
 					new THREE.Vector3( 1, 0, 0 ),
 					new THREE.Vector3( 0, 1, 0 ),
@@ -161,13 +177,9 @@
 
 				requestAnimationFrame( animate );
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				mesh1.rotation.y += 0.01;
 
-					var object = scene.children[ i ];
-					object.rotation.x += 0.005;
-					object.rotation.y += 0.01;
-
-				}
+				mesh2.rotation.y += 0.01;
 
 				renderer.render( scene, camera );