Skip to content

Commit b7a6baf

Browse files
bhoustonmrdoob
bhouston
authored and
mrdoob
committed
Channel materials example: normal, depth, depthRGBA (mrdoob#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.
1 parent 0a60f11 commit b7a6baf

File tree

3 files changed

+299
-0
lines changed

3 files changed

+299
-0
lines changed

‎examples/files.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ var files = {
116116
"webgl_materials_bumpmap",
117117
"webgl_materials_bumpmap_skin",
118118
"webgl_materials_cars",
119+
"webgl_materials_channels",
119120
"webgl_materials_cubemap",
120121
"webgl_materials_cubemap_balls_reflection",
121122
"webgl_materials_cubemap_balls_refraction",

‎examples/js/shaders/DepthRGBAUnpackedShader.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* @author Ben Houston / bhouston / http://clara.io
3+
*
4+
* Test depth pack, unpack and range
5+
*
6+
*/
7+
8+
THREE.DepthRGBAUnpackedShader = {
9+
10+
vertexShader: THREE.ShaderChunk[ 'depth_vert' ],
11+
12+
fragmentShader: [
13+
"#include <common>",
14+
"#include <packing>",
15+
"#include <logdepthbuf_pars_fragment>",
16+
17+
"void main() {",
18+
19+
"#include <logdepthbuf_fragment>",
20+
21+
"#ifdef USE_LOGDEPTHBUF_EXT",
22+
23+
"float depth = gl_FragDepthEXT;",
24+
25+
"#else",
26+
27+
"float depth = gl_FragCoord.z;",
28+
29+
"#endif",
30+
31+
"gl_FragColor = vec4( vec3( unpackRGBAToLinearUnit( packLinearUnitToRGBA( depth ) ) ), 1.0 );",
32+
33+
"}" ].join( "\n" )
34+
35+
};

‎examples/webgl_materials_channels.html

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - materials - displacement map</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<style>
8+
body {
9+
background:#000;
10+
color:#fff;
11+
padding:0;
12+
margin:0;
13+
font-weight: bold;
14+
overflow:hidden;
15+
}
16+
17+
a { color: #ffffff; }
18+
19+
#info {
20+
position: absolute;
21+
top: 0px; width: 100%;
22+
color: #ffffff;
23+
padding: 5px;
24+
font-family:Monospace;
25+
font-size:13px;
26+
text-align:center;
27+
}
28+
29+
#vt { display:none }
30+
#vt, #vt a { color:orange; }
31+
32+
#stats { position: absolute; top:0; left: 0 }
33+
#stats #fps { background: transparent !important }
34+
#stats #fps #fpsText { color: #aaa !important }
35+
#stats #fps #fpsGraph { display: none }
36+
37+
</style>
38+
</head>
39+
40+
<body>
41+
42+
<div id="info">
43+
<a href="http://threejs.org" target="_blank">three.js</a> - <span id="description">Normal, Depth, DepthRGBA, DepthRGBAUnpacked, Materials</span> by <a href="https://Clara.io">Ben Houston</a>.<br />
44+
ninja head from <a href="http://developer.amd.com/tools-and-sdks/archive/legacy-cpu-gpu-tools/amd-gpu-meshmapper/" target="_blank">AMD GPU MeshMapper</a>
45+
46+
<div id="vt">displacement mapping requires vertex textures</div>
47+
</div>
48+
49+
<script src="../build/three.min.js"></script>
50+
<script src="js/controls/OrbitControls.js"></script>
51+
52+
53+
<script src="js/loaders/BinaryLoader.js"></script>
54+
<script src="js/shaders/DepthRGBAUnpackedShader.js"></script>
55+
56+
<script src="js/Detector.js"></script>
57+
<script src="js/libs/stats.min.js"></script>
58+
<script src='js/libs/dat.gui.min.js'></script>
59+
60+
<script>
61+
62+
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
63+
64+
var stats, loader;
65+
66+
var camera, scene, renderer, controls;
67+
var params = {
68+
material: 'normal',
69+
camera: 'perspective'
70+
};
71+
var cameraOrtho, cameraPerspective;
72+
var controlsOrtho, controlsPerspective;
73+
74+
var mesh, materialStandard, materialDepth, materialDepthRGBA, materialDepthRGBAUnpacked, materialNormal;
75+
76+
var pointLight, ambientLight;
77+
78+
var mouseX = 0;
79+
var mouseY = 0;
80+
81+
var windowHalfX = window.innerWidth / 2;
82+
var windowHalfY = window.innerHeight / 2;
83+
84+
var height = 500; // of camera frustum
85+
86+
var r = 0.0;
87+
88+
init();
89+
animate();
90+
initGui();
91+
92+
// Init gui
93+
function initGui() {
94+
95+
var gui = new dat.GUI();
96+
gui.add( params, 'material', [ 'standard', 'normal', 'depth', 'depthRGBA', 'depthRGBAUnpacked' ] );
97+
gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
98+
99+
}
100+
101+
function init() {
102+
103+
var container = document.createElement( 'div' );
104+
document.body.appendChild( container );
105+
106+
renderer = new THREE.WebGLRenderer();
107+
renderer.setPixelRatio( window.devicePixelRatio );
108+
renderer.setSize( window.innerWidth, window.innerHeight );
109+
container.appendChild( renderer.domElement );
110+
111+
//
112+
113+
scene = new THREE.Scene();
114+
115+
var aspect = window.innerWidth / window.innerHeight;
116+
cameraPerspective = new THREE.PerspectiveCamera( 45, aspect, 1000, 2500 );
117+
cameraPerspective.position.z = 1500;
118+
scene.add( cameraPerspective );
119+
120+
cameraOrtho = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1000, 2500 );
121+
cameraOrtho.position.z = 1500;
122+
scene.add( cameraOrtho );
123+
124+
camera = cameraPerspective;
125+
126+
controlsPerspective = new THREE.OrbitControls( cameraPerspective, renderer.domElement );
127+
controlsPerspective.enableZoom = true;
128+
controlsPerspective.enableDamping = true;
129+
130+
controlsOrtho = new THREE.OrbitControls( cameraOrtho, renderer.domElement );
131+
controlsOrtho.enableZoom = true;
132+
controlsOrtho.enableDamping = true;
133+
134+
// lights
135+
136+
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
137+
scene.add( ambientLight );
138+
139+
var pointLight = new THREE.PointLight( 0xff0000, 0.5 );
140+
pointLight.position.z = 2500;
141+
scene.add( pointLight );
142+
143+
var pointLight2 = new THREE.PointLight( 0xff6666, 1 );
144+
camera.add( pointLight2 );
145+
146+
var pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
147+
pointLight3.position.x = - 1000;
148+
pointLight3.position.z = 1000;
149+
scene.add( pointLight3 );
150+
151+
// textures
152+
153+
var textureLoader = new THREE.TextureLoader();
154+
155+
var normalMap = textureLoader.load( "textures/normal/ninja/normal.jpg" );
156+
157+
var aoMap = textureLoader.load( "textures/normal/ninja/ao.jpg" );
158+
159+
var displacementMap = textureLoader.load( "textures/normal/ninja/displacement.jpg" );
160+
161+
// material
162+
163+
materialStandard = new THREE.MeshStandardMaterial( { color: 0xffffff });
164+
materialStandard.metalness = 0;
165+
materialStandard.roughness = 0.6;
166+
materialStandard.displacementMap = displacementMap;
167+
materialStandard.displacementScale = 1.5;
168+
materialStandard.aoMap = aoMap;
169+
materialStandard.normalMap = normalMap;
170+
materialStandard.normalScale.set( 1, - 1 );
171+
172+
materialDepth = new THREE.MeshDepthMaterial();
173+
materialDepthRGBA = new THREE.ShaderMaterial( THREE.ShaderLib.depthRGBA );
174+
materialDepthRGBAUnpacked = new THREE.ShaderMaterial( THREE.DepthRGBAUnpackedShader );
175+
materialNormal = new THREE.MeshNormalMaterial();
176+
177+
//
178+
179+
loader = new THREE.BinaryLoader();
180+
181+
loader.load( "obj/ninja/NinjaLo_bin.js", function( geometry ) {
182+
183+
geometry.faceVertexUvs[ 1 ] = geometry.faceVertexUvs[ 0 ]; // 2nd set of UVs required for aoMap
184+
185+
mesh = new THREE.Mesh( geometry, materialNormal );
186+
mesh.scale.multiplyScalar( 25 );
187+
scene.add( mesh );
188+
189+
} );
190+
191+
192+
//
193+
194+
stats = new Stats();
195+
container.appendChild( stats.domElement );
196+
197+
//
198+
199+
window.addEventListener( 'resize', onWindowResize, false );
200+
201+
}
202+
203+
function onWindowResize() {
204+
205+
var aspect = window.innerWidth / window.innerHeight;
206+
207+
camera.left = - height * aspect;
208+
camera.right = height * aspect;
209+
camera.top = height;
210+
camera.bottom = - height;
211+
212+
camera.updateProjectionMatrix();
213+
214+
renderer.setSize( window.innerWidth, window.innerHeight );
215+
216+
}
217+
218+
//
219+
220+
function animate() {
221+
222+
requestAnimationFrame( animate );
223+
224+
controlsOrtho.update();
225+
controlsPerspective.update();
226+
227+
stats.begin();
228+
render();
229+
stats.end();
230+
231+
}
232+
233+
function render() {
234+
235+
if( mesh ) {
236+
var material = mesh.material;
237+
switch( params.material ) {
238+
case 'standard': material = materialStandard; break;
239+
case 'depth': material = materialDepth; break;
240+
case 'depthRGBA': material = materialDepthRGBA; break;
241+
case 'depthRGBAUnpacked': material = materialDepthRGBAUnpacked; break;
242+
case 'normal': material = materialNormal; break;
243+
}
244+
mesh.material = material;
245+
}
246+
247+
switch( params.camera ) {
248+
case 'perspective': camera = cameraPerspective; break;
249+
case 'ortho': camera = cameraOrtho; break;
250+
}
251+
252+
253+
r += 0.01;
254+
255+
renderer.render( scene, camera );
256+
257+
}
258+
259+
</script>
260+
261+
</body>
262+
263+
</html>

0 commit comments

Comments
 (0)