From a7e1f5268f5d8814fc4112f7ad01009c569fc672 Mon Sep 17 00:00:00 2001 From: Dusan Bosnjak Date: Sun, 25 Nov 2018 15:49:35 -0800 Subject: [PATCH 1/3] depth peel example --- examples/files.js | 1 + examples/materials_depth_peel.html | 485 +++++++++++++++++++++++++++++ 2 files changed, 486 insertions(+) create mode 100644 examples/materials_depth_peel.html diff --git a/examples/files.js b/examples/files.js index 0d22a47b39e341..08b91549aef8a9 100644 --- a/examples/files.js +++ b/examples/files.js @@ -275,6 +275,7 @@ var files = { "webgl_water_flowmap" ], "webgl / advanced": [ + "materials_depth_peel", "webgl_buffergeometry", "webgl_buffergeometry_constructed_from_geometry", "webgl_buffergeometry_custom_attributes_particles", diff --git a/examples/materials_depth_peel.html b/examples/materials_depth_peel.html new file mode 100644 index 00000000000000..14b7ea0d83bef3 --- /dev/null +++ b/examples/materials_depth_peel.html @@ -0,0 +1,485 @@ + + + + three.js webgl - materials - depth peel + + + + + + +
+ three.js - webgl depth peel demo
+
+ + + + + + + + + + + + + + + From 6ef98f570986eb926f8f491ae3181440d11650ba Mon Sep 17 00:00:00 2001 From: Dusan Bosnjak Date: Mon, 26 Nov 2018 16:05:23 -0800 Subject: [PATCH 2/3] fix name --- examples/files.js | 2 +- ...el.html => webgl_materials_depthpeel.html} | 53 ++++++++++--------- 2 files changed, 30 insertions(+), 25 deletions(-) rename examples/{materials_depth_peel.html => webgl_materials_depthpeel.html} (92%) diff --git a/examples/files.js b/examples/files.js index 08b91549aef8a9..7a547ebdc64944 100644 --- a/examples/files.js +++ b/examples/files.js @@ -275,7 +275,6 @@ var files = { "webgl_water_flowmap" ], "webgl / advanced": [ - "materials_depth_peel", "webgl_buffergeometry", "webgl_buffergeometry_constructed_from_geometry", "webgl_buffergeometry_custom_attributes_particles", @@ -304,6 +303,7 @@ var files = { "webgl_gpgpu_water", "webgl_gpgpu_protoplanet", "webgl_gpu_particle_system", + "webgl_materials_depthpeel", "webgl_materials_modified", "webgl_raymarching_reflect", "webgl_shadowmap_pcss", diff --git a/examples/materials_depth_peel.html b/examples/webgl_materials_depthpeel.html similarity index 92% rename from examples/materials_depth_peel.html rename to examples/webgl_materials_depthpeel.html index 14b7ea0d83bef3..04f0b81d2beeb5 100644 --- a/examples/materials_depth_peel.html +++ b/examples/webgl_materials_depthpeel.html @@ -32,7 +32,7 @@
- three.js - webgl depth peel demo
+ three.js - webgl depth peel demo by pailhead.
@@ -59,12 +59,7 @@ var stats - const MAX_LAYERS = 6 - - const LAYERS = { - OPAQUE: 0, - TRANSPARENT: 1, - } + var MAX_LAYERS = 6 var debugScene, debugCamera var depthMaterial, depthTarget, compositeMaterial, gl @@ -73,9 +68,9 @@ var transparentObjects = [] var opaqueObjects = [] - const targets = [] + var targets = [] - const globalPeelUniforms = { + var globalPeelUniforms = { uLayer: { value: 0 }, uPrevDepthTexture: { value: null }, uPrevColorTexture: { value: null }, @@ -88,14 +83,14 @@ layers: 1, opacity: 0.5, doubleSide: false, - defaultMode: false, + enabled: false, monochrome: false, } gui.add(options, 'layers', 1, 6).step(1) gui.add(options, 'opacity', 0, 1).onChange(onOpacityChange) + gui.add(options, 'enabled').onChange(onModeChange) gui.add(options, 'doubleSide').onChange(onSideChange) - gui.add(options, 'defaultMode').onChange(onModeChange) gui.add(options, 'monochrome').onChange(onMonochromeChange) function onOpacityChange(val){ @@ -107,7 +102,7 @@ } function onMonochromeChange(){ - const color = getColorKey() + var color = getColorKey() transparentObjects.forEach(o=>{ o.material.color.copy(o.material[color]) }) @@ -115,7 +110,7 @@ function onSideChange(val){ - const side = getSide() + var side = getSide() depthMaterial.side = side depthMaterial.needsUpdate = true @@ -130,9 +125,9 @@ function onModeChange(){ transparentObjects.forEach(o=>{ - o.material.transparent = options.defaultMode + o.material.transparent = options.enabled }) - globalPeelUniforms.uDepthPeel.value = options.defaultMode ? 0 : 1 + globalPeelUniforms.uDepthPeel.value = options.enabled ? 0 : 1 } function getSide(){ @@ -156,6 +151,7 @@ ${shader.fragmentShader} ` + //peel depth shader.fragmentShader = shader.fragmentShader.replace( /}$/gm, ` @@ -177,6 +173,7 @@ } + //premultiply alpha function colorOnBeforeCompile(shader){ shader.fragmentShader = shader.fragmentShader.replace('#include ','') @@ -186,6 +183,7 @@ ${shader.fragmentShader} ` + //this has early return depthOnbeforeCompile(shader) shader.fragmentShader = shader.fragmentShader.replace( @@ -238,8 +236,6 @@ renderer.gammaOutput = true; - gl = renderer.getContext() - // scene scene = new THREE.Scene(); @@ -323,6 +319,7 @@ const boxGeometry = new THREE.BoxBufferGeometry(2,2,2,1,1,1) + //setup objects for ( let i = 0 ; i < numItems ; i ++ ){ const mesh = new THREE.Mesh( @@ -336,7 +333,6 @@ mesh.renderOrder = 1 - mesh.layers.set transparentObjects.push(mesh) mesh.material.onBeforeCompile = colorOnBeforeCompile @@ -356,7 +352,6 @@ mesh.position.y = (i - numItems /2)* 2.5 mesh.scale.x = 10 - scene.add(mesh) } @@ -390,47 +385,55 @@ } function renderDepthPeel(){ + + //clear main frame renderer.setClearColor(0x000,1) renderer.clear() - globalPeelUniforms.uLayer.value = 0 + //render first depth scene.overrideMaterial = depthMaterial renderer.setClearColor(0xffffff,1) renderer.render( scene, camera, targets[0], true) + //first color scene.overrideMaterial = null renderer.setClearColor(0x000,0) renderer.render( scene, camera, targets[2], true) for( let i = 0 ; i < options.layers ; i ++ ){ - const a = i % 3 + const a = i % 3 //shift these around const b = (i+1) % 3 const c = (i+2) % 3 - const d = 3 + const d = 3 //peel into this globalPeelUniforms.uPrevDepthTexture.value = targets[a] globalPeelUniforms.uLayer.value = i + 1 + //render next depth scene.overrideMaterial = depthMaterial renderer.setClearColor(0xffffff,1) renderer.render( scene, camera, targets[b], true) + //peel scene.overrideMaterial = null renderer.setClearColor(0x000,0) renderer.render( scene, camera, targets[d], true) + //combine compositeMaterial.uniforms.uTextureA.value = targets[c] compositeMaterial.uniforms.uTextureB.value = targets[d] renderer.render( compositeScene, camera, targets[a], true) } + //render final result over opaque objects globalPeelUniforms.uPrevDepthTexture.value = null transparentObjects.forEach(o=>o.visible = false) + renderer.render( scene, camera ) renderer.render( compositeScene, camera ) @@ -448,7 +451,9 @@ debugCamera.aspect = camera.aspect debugCamera.updateProjectionMatrix() + initTargets() + } function animate() { @@ -465,7 +470,7 @@ function render() { - if(options.defaultMode){ + if(options.enabled){ renderer.clear() renderer.render( scene, camera ) @@ -473,7 +478,7 @@ } else { renderDepthPeel() - renderer.render( debugScene , debugCamera ) + // renderer.render( debugScene , debugCamera ) } From 174d27c214ae2ae6abf6545fc524938bded6e222 Mon Sep 17 00:00:00 2001 From: Dusan Bosnjak Date: Fri, 7 Dec 2018 16:44:48 -0800 Subject: [PATCH 3/3] oops, messed up the enabled flag --- examples/webgl_materials_depthpeel.html | 26 +++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/examples/webgl_materials_depthpeel.html b/examples/webgl_materials_depthpeel.html index 04f0b81d2beeb5..6d9a3bc1fabe82 100644 --- a/examples/webgl_materials_depthpeel.html +++ b/examples/webgl_materials_depthpeel.html @@ -70,15 +70,6 @@ var opaqueObjects = [] var targets = [] - var globalPeelUniforms = { - uLayer: { value: 0 }, - uPrevDepthTexture: { value: null }, - uPrevColorTexture: { value: null }, - uScreenSize: { value: new THREE.Vector2(1,1) }, - uDepthPeel: { value: 1 }, - uDepthOffset: { value: 0 }, - } - var options = { layers: 1, opacity: 0.5, @@ -87,6 +78,15 @@ monochrome: false, } + var globalPeelUniforms = { + uLayer: { value: 0 }, + uPrevDepthTexture: { value: null }, + uPrevColorTexture: { value: null }, + uScreenSize: { value: new THREE.Vector2(1,1) }, + uDepthPeel: { value: Number(options.enabled) }, + uDepthOffset: { value: 0 }, + } + gui.add(options, 'layers', 1, 6).step(1) gui.add(options, 'opacity', 0, 1).onChange(onOpacityChange) gui.add(options, 'enabled').onChange(onModeChange) @@ -125,9 +125,9 @@ function onModeChange(){ transparentObjects.forEach(o=>{ - o.material.transparent = options.enabled + o.material.transparent = !options.enabled }) - globalPeelUniforms.uDepthPeel.value = options.enabled ? 0 : 1 + globalPeelUniforms.uDepthPeel.value = Number(options.enabled) } function getSide(){ @@ -380,6 +380,8 @@ scene.updateMatrixWorld() + onModeChange() + animate() } @@ -470,7 +472,7 @@ function render() { - if(options.enabled){ + if(!options.enabled){ renderer.clear() renderer.render( scene, camera )