From e3e90dd5217eec515064e6c2c274cdbd398ed3d0 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 8 Jun 2017 18:16:54 -0700 Subject: [PATCH] Renamed modified material example and simplified. --- examples/files.js | 2 +- ...ied.html => webgl_materials_modified.html} | 93 ++----------------- 2 files changed, 9 insertions(+), 86 deletions(-) rename examples/{webgl_materials_normalmap_modified.html => webgl_materials_modified.html} (59%) diff --git a/examples/files.js b/examples/files.js index 0d9c8b1de6..7aad3765bb 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 777bc57954..a8a406f243 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 ); } -- GitLab