Added GUI for width factor

examples/webgl_materials_wireframe.html

@@ -28,12 +28,12 @@
 
 		<script type="x-shader/x-fragment" id="fragmentShader">
 
+			uniform float widthFactor;
+
 			varying vec3 vCenter;
 
 			float edgeFactorTri() {
 
-				const float widthFactor = 1.0;
-
 				vec3 d = fwidth( vCenter.xyz );
 
 				vec3 a3 = smoothstep( vec3( 0.0 ), d * widthFactor, vCenter.xyz );
@@ -56,6 +56,12 @@
 
 			import * as THREE from '../build/three.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			var API = {
+				widthFactor: 1
+			};
+
 			var renderer, scene, camera, mesh1, mesh2;
 
 			init();
@@ -83,16 +89,18 @@
 
 					} );
 
-					mesh2 = new THREE.Mesh( geometry, material );
-					mesh2.position.set( - 40, 0, 0 );
+					mesh1 = new THREE.Mesh( geometry, material );
+					mesh1.position.set( - 40, 0, 0 );
 
-					scene.add( mesh2 );
+					scene.add( mesh1 );
 
 					// on the right
 
+					var uniforms = { 'widthFactor': { value: API.widthFactor } };
+
 					var material = new THREE.ShaderMaterial( {
 
-						uniforms: {},
+						uniforms: uniforms,
 						vertexShader: document.getElementById( 'vertexShader' ).textContent,
 						fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 						side: THREE.DoubleSide
@@ -106,10 +114,10 @@
 
 					setupAttributes( geometry );
 
-					mesh1 = new THREE.Mesh( geometry, material );
-					mesh1.position.set( 40, 0, 0 );
+					mesh2 = new THREE.Mesh( geometry, material );
+					mesh2.position.set( 40, 0, 0 );
 
-					scene.add( mesh1 );
+					scene.add( mesh2 );
 
 					//
 
@@ -117,6 +125,20 @@
 
 				} );
 
+				//
+
+				var gui = new GUI();
+
+				gui.add( API, 'widthFactor', 0.4, 4 ).onChange( function () {
+
+					mesh2.material.uniforms.widthFactor.value = API.widthFactor;
+
+				} );
+
+				gui.open();
+
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}