From b7a6bafba4b1ad01a1b7f79c77daefe3cacbf995 Mon Sep 17 00:00:00 2001 From: "Ben Houston (Clara.io)" Date: Thu, 7 Apr 2016 13:28:03 -0400 Subject: [PATCH] Channel materials example: normal, depth, depthRGBA (#8549) * special purpose materials. * rename example from special_purpose -> channels. Add camera controls. * minor polish to webgl_materials_channels. * add standard material with displacement, normal and ao to show contract with normal and depth materials. * fix orthographic camera near/far bounds. * remove double add of material_channels example. --- examples/files.js | 1 + .../js/shaders/DepthRGBAUnpackedShader.js | 35 +++ examples/webgl_materials_channels.html | 263 ++++++++++++++++++ 3 files changed, 299 insertions(+) create mode 100644 examples/js/shaders/DepthRGBAUnpackedShader.js create mode 100644 examples/webgl_materials_channels.html diff --git a/examples/files.js b/examples/files.js index d49958fe4f..b3c6503aed 100644 --- a/examples/files.js +++ b/examples/files.js @@ -116,6 +116,7 @@ var files = { "webgl_materials_bumpmap", "webgl_materials_bumpmap_skin", "webgl_materials_cars", + "webgl_materials_channels", "webgl_materials_cubemap", "webgl_materials_cubemap_balls_reflection", "webgl_materials_cubemap_balls_refraction", diff --git a/examples/js/shaders/DepthRGBAUnpackedShader.js b/examples/js/shaders/DepthRGBAUnpackedShader.js new file mode 100644 index 0000000000..3619a2afbf --- /dev/null +++ b/examples/js/shaders/DepthRGBAUnpackedShader.js @@ -0,0 +1,35 @@ +/** + * @author Ben Houston / bhouston / http://clara.io + * + * Test depth pack, unpack and range + * + */ + +THREE.DepthRGBAUnpackedShader = { + + vertexShader: THREE.ShaderChunk[ 'depth_vert' ], + + fragmentShader: [ + "#include ", + "#include ", + "#include ", + + "void main() {", + + "#include ", + + "#ifdef USE_LOGDEPTHBUF_EXT", + + "float depth = gl_FragDepthEXT;", + + "#else", + + "float depth = gl_FragCoord.z;", + + "#endif", + + "gl_FragColor = vec4( vec3( unpackRGBAToLinearUnit( packLinearUnitToRGBA( depth ) ) ), 1.0 );", + + "}" ].join( "\n" ) + +}; diff --git a/examples/webgl_materials_channels.html b/examples/webgl_materials_channels.html new file mode 100644 index 0000000000..972f76045c --- /dev/null +++ b/examples/webgl_materials_channels.html @@ -0,0 +1,263 @@ + + + + three.js webgl - materials - displacement map + + + + + + + +
+ three.js - Normal, Depth, DepthRGBA, DepthRGBAUnpacked, Materials by Ben Houston.
+ ninja head from AMD GPU MeshMapper + +
displacement mapping requires vertex textures
+
+ + + + + + + + + + + + + + + + + -- GitLab