diff --git a/examples/files.js b/examples/files.js
index 0d9c8b1de64c0fd88c79c2a48c1c4c58f6570923..7aad3765bbc9db59211728729aeff12138207ea0 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -144,9 +144,9 @@ var files = {
"webgl_materials_envmaps_hdr",
"webgl_materials_grass",
"webgl_materials_lightmap",
+ "webgl_materials_modified",
"webgl_materials_nodes",
"webgl_materials_normalmap",
- "webgl_materials_normalmap_modified",
"webgl_materials_parallaxmap",
"webgl_materials_reflectivity",
"webgl_materials_shaders_fresnel",
diff --git a/examples/webgl_materials_normalmap_modified.html b/examples/webgl_materials_modified.html
similarity index 59%
rename from examples/webgl_materials_normalmap_modified.html
rename to examples/webgl_materials_modified.html
index 777bc57954af1fb4778fcc0f1e9ed4b8e1a5eafd..a8a406f243e5031b2b1fad11706975cd0dbacb45 100644
--- a/examples/webgl_materials_normalmap_modified.html
+++ b/examples/webgl_materials_modified.html
@@ -1,7 +1,7 @@
- three.js webgl - materials - normal map [Lee Perry-Smith]
+ three.js webgl - materials - modified
-
three.js - webgl normalmap demo.
+
three.js wegbl - modified material.
Lee Perry-Smith head.
-
-
displacement mapping needs vertex textures (GPU with Shader Model 3.0)
- on Windows use
Chrome --use-gl=desktop or Firefox 4
- please star this
Chrome issue to get ANGLE support
-
@@ -77,8 +68,6 @@
var mesh;
- var directionalLight, pointLight, ambientLight;
-
var mouseX = 0;
var mouseY = 0;
@@ -88,8 +77,6 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
- var composer, effectFXAA;
-
init();
animate();
@@ -103,48 +90,21 @@
scene = new THREE.Scene();
- // LIGHTS
-
- ambientLight = new THREE.AmbientLight( 0x444444 );
- scene.add( ambientLight );
-
- pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
- pointLight.position.set( 0, 0, 600 );
-
- scene.add( pointLight );
-
- directionalLight = new THREE.DirectionalLight( 0xffffff );
- directionalLight.position.set( 1, -0.5, -1 );
- scene.add( directionalLight );
-
- var textureLoader = new THREE.TextureLoader();
-
- var material = new THREE.MeshPhongMaterial( {
- color: 0xdddddd,
- specular: 0x222222,
- shininess: 35,
- map: textureLoader.load( "obj/leeperrysmith/Map-COL.jpg" ),
- specularMap: textureLoader.load( "obj/leeperrysmith/Map-SPEC.jpg" ),
- normalMap: textureLoader.load( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
- normalScale: new THREE.Vector2( 0.8, 0.8 )
- } );
-
+ var material = new THREE.MeshNormalMaterial();
material.onBeforeCompile = function () {
var shader = this.__webglShader;
+ // console.log( shader );
+
shader.uniforms.time = { value: 0 };
+ shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
'#include ',
'vec3 transformed = vec3( position.x + sin( time + position.y ) / 2.0, position.y, position.z );'
);
- shader.vertexShader = shader.vertexShader.replace(
- '#include ',
- '#include \nuniform float time;'
- );
-
};
loader = new THREE.JSONLoader();
@@ -158,49 +118,15 @@
} );
renderer = new THREE.WebGLRenderer( { antialias: false } );
- renderer.setClearColor( 0x111111 );
+ renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
- renderer.gammaInput = true;
- renderer.gammaOutput = true;
-
- //
-
stats = new Stats();
container.appendChild( stats.dom );
-
- // COMPOSER
-
- renderer.autoClear = false;
-
- var renderModel = new THREE.RenderPass( scene, camera );
-
- var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
- var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
- effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-
- var canvas = renderer.context.canvas;
-
- effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
-
- effectBleach.uniforms[ 'opacity' ].value = 0.4;
-
- effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 );
- effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 );
-
- effectColor.renderToScreen = true;
-
- composer = new THREE.EffectComposer( renderer );
-
- composer.addPass( renderModel );
- composer.addPass( effectFXAA );
- composer.addPass( effectBleach );
- composer.addPass( effectColor );
-
// EVENTS
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
@@ -219,9 +145,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
-
- effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
}
@@ -262,7 +185,7 @@
}
- composer.render();
+ renderer.render( scene, camera );
}