Merge pull request #8015 from Mugen87/dev

refactoring "derivatives" material property in examples

examples/webgl_materials_bumpmap_skin.html

@@ -236,7 +236,8 @@
 
 				uniforms[ "bumpScale" ].value = 8;
 
-				var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true, derivatives: true } );
+				var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true } );
+				material.extensions.derivatives = true;
 
 				mesh = new THREE.Mesh( geometry, material );
 

examples/webgl_materials_skin.html

@@ -144,11 +144,14 @@
 				uniforms[ "passID" ].value = 1;
 
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, derivatives: true };
-				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true, derivatives: true };
+				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
+				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
 
 				material = new THREE.ShaderMaterial( parameters );
+				material.extensions.derivatives = true;
+
 				var materialUV = new THREE.ShaderMaterial( parametersUV );
+				materialUV.extensions.derivatives = true;
 
 				// LOADER
 

examples/webgl_materials_wireframe.html

@@ -58,53 +58,57 @@
 
 			function init() {
 
+				var geometry, material, mesh;
+
+				var size = 150;
+
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 800;
 
 				scene = new THREE.Scene();
 
-				var size = 150;
-
 				//
 
-				var geometry = new THREE.BoxGeometry( size, size, size );
-				var material = new THREE.MeshBasicMaterial( { wireframe: true } );
+				geometry = new THREE.BoxGeometry( size, size, size );
+				material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.position.x = -150;
 				scene.add( mesh );
 
 				//
 
-				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
+				geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
 
 				setupAttributes( geometry );
 
-				var material = new THREE.ShaderMaterial( {
+				material = new THREE.ShaderMaterial( {
 					uniforms: {},
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-					derivatives: true
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				material.extensions.derivatives = true;
+
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.position.x = 150;
 				scene.add( mesh );
 
 				//
 
-				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
+				geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
 
 				setupAttributes( geometry );
 
-				var material = new THREE.ShaderMaterial( {
+				material = new THREE.ShaderMaterial( {
 					uniforms: {},
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-					derivatives: true
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				material.extensions.derivatives = true;
+
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.position.x = -150;
 				scene.add( mesh );