Skip to content

Commit 837f4bc

Browse files
meetarmeetar
committed
updated displacement shader
1 parent b10053c commit 837f4bc

File tree

1 file changed

+15
-252
lines changed

1 file changed

+15
-252
lines changed

‎displacement.html‎

Lines changed: 15 additions & 252 deletions
Original file line numberDiff line numberDiff line change
@@ -8,219 +8,13 @@
88
</head>
99
<body style="background:#ececec; margin:0px; padding:0px" onmousemove="update()">
1010

11-
<canvas id="imgCanvas" style="position: absolute; visibility:hidden;"></canvas>
12-
1311
<div id="container"></div>
1412

1513

1614

1715

1816

19-
<!-- ----- VERTEX SHADER ----- -->
20-
<script id="vertex_shader" type="x-shader/x-vertex">
21-
22-
attribute vec4 tangent;
23-
attribute float amplitude;
24-
attribute float displacement;
25-
26-
varying vec3 vTangent;
27-
varying vec3 vBinormal;
28-
varying vec3 vNormal;
29-
varying vec2 vUv;
30-
31-
32-
varying vec3 vPointLightVector;
33-
varying vec3 vViewPosition;
34-
35-
uniform vec3 uPointLightPos;
36-
37-
#ifdef VERTEX_TEXTURES
38-
39-
uniform sampler2D tDisplacement;
40-
uniform float uDisplacementScale;
41-
uniform float uDisplacementBias;
42-
uniform float uDisplacementPostScale;
43-
44-
#endif
45-
46-
47-
void main() {
48-
49-
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
50-
vViewPosition = -mvPosition.xyz; // ah HA
51-
52-
vNormal = normalize( normalMatrix * normal );
53-
54-
//tangent and binormal vectors
55-
vTangent = normalize( normalMatrix * tangent.xyz );
56-
57-
vBinormal = cross( vNormal, vTangent ) * tangent.w;
58-
vBinormal = normalize( vBinormal );
59-
60-
vUv = uv;
61-
62-
63-
64-
// point light
65-
vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );
66-
vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );
67-
68-
#ifdef VERTEX_TEXTURES
69-
vec3 dv = texture2D( tDisplacement, vUv ).xyz;
70-
float df = uDisplacementScale * dv.x + uDisplacementBias;
71-
72-
vec4 displacedPosition = vec4( vNormal.xyz * df * uDisplacementPostScale/100.0, 0.0 ) + mvPosition;
73-
74-
gl_Position = projectionMatrix * displacedPosition;
75-
#else
76-
gl_Position = projectionMatrix * mvPosition;
77-
#endif
78-
}
79-
80-
</script>
81-
82-
83-
84-
85-
<!-- ----- FRAGMENT SHADER ----- -->
86-
87-
<script id="fragment_shader" type="x-shader/x-fragment">
88-
89-
#extension GL_OES_standard_derivatives : enable
90-
91-
uniform vec3 uPointLightPos;
92-
93-
uniform vec3 uAmbientLightColor;
94-
uniform vec3 uPointLightColor;
95-
96-
uniform vec3 uAmbientColor;
97-
uniform vec3 uDiffuseColor;
98-
uniform vec3 uSpecularColor;
99-
uniform float uShininess; //
100-
101-
uniform sampler2D tDiffuse;
102-
uniform sampler2D tDisplacement;
103-
uniform sampler2D tNormal;
104-
uniform sampler2D tSpec; //
105-
uniform sampler2D tOcc; //
106-
107-
uniform float tDiffuseOpacity;
108-
109-
uniform float uNormalScale; //
110-
111-
varying vec3 vTangent;
112-
varying vec3 vBinormal;
113-
varying vec3 vNormal;
114-
varying vec2 vUv;
115-
116-
varying vec3 vPointLightVector;
117-
varying vec3 vViewPosition;
118-
119-
uniform float uDisplacementPostScale;
120-
121-
uniform float bumpScale;
122-
123-
// Derivative maps - bump mapping unparametrized surfaces by Morten Mikkelsen
124-
// http://mmikkelsen3d.blogspot.sk/2011/07/derivative-maps.html
125-
126-
// Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2)
127-
128-
vec2 dHdxy_fwd() {
129-
vec2 dSTdx = dFdx( vUv );
130-
vec2 dSTdy = dFdy( vUv );
131-
132-
float hll = bumpScale * texture2D( tDisplacement, vUv ).x;
133-
float dBx = bumpScale * texture2D( tDisplacement, vUv + dSTdx ).x - hll;
134-
float dBy = bumpScale * texture2D( tDisplacement, vUv + dSTdy ).x - hll;
135-
136-
return vec2( dBx, dBy );
13717

138-
}
139-
140-
vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy ) {
141-
142-
vec3 vSigmaX = dFdx( surf_pos );
143-
vec3 vSigmaY = dFdy( surf_pos );
144-
vec3 vN = surf_norm; // normalized
145-
146-
vec3 R1 = cross( vSigmaY, vN );
147-
vec3 R2 = cross( vN, vSigmaX );
148-
149-
float fDet = dot( vSigmaX, R1 );
150-
151-
vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );
152-
return normalize( abs( fDet ) * surf_norm - vGrad );
153-
154-
}
155-
156-
157-
void main() {
158-
159-
vec4 diffuseTex = texture2D( tDiffuse, vUv ) * tDiffuseOpacity;
160-
diffuseTex.a = tDiffuseOpacity;
161-
// vec3 specTex = texture2D( tSpec, vUv ).xyz;
162-
// vec3 occTex = texture2D( tOcc, vUv ).xyz;
163-
vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;
164-
165-
mat3 tsb = mat3( vTangent, vBinormal, vNormal );
166-
vec3 finalNormal = tsb * normalTex.rgb;
167-
168-
vec3 normal = normalize( finalNormal );
169-
vec3 normal2 = normalize( finalNormal );
170-
171-
vec3 viewPosition = normalize( vViewPosition );
172-
173-
normal = perturbNormalArb( -vViewPosition, normal * vec3(100.0/(uDisplacementPostScale+1.0)), dHdxy_fwd() );
174-
175-
normal = normalize(normal);
176-
// point light
177-
178-
vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );
179-
vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 ); //
180-
181-
vec3 pointVector = normalize( vPointLightVector );
182-
float dotProduct = dot( normal, pointVector );
183-
184-
float pointDiffuseWeight = max( dotProduct, 0.0 );
185-
186-
vec3 pointHalfVector = normalize( vPointLightVector + viewPosition );
187-
188-
189-
// specular
190-
191-
float pointDotNormalHalf = max( dot( normal, pointHalfVector ), 0.0 );
192-
float pointSpecularWeight = 0.0; //
193-
pointSpecularWeight += max( pow( pointDotNormalHalf, uShininess ), 0.0 );
194-
pointSpecular += vec4( uSpecularColor, 1.0 ) * vec4( uPointLightColor, 1.0 ) * pointSpecularWeight * pointDiffuseWeight;
195-
196-
if ( pointDotNormalHalf >= 0.0 ) pointSpecularWeight = pow( pointDotNormalHalf, uShininess ); // no spectex
197-
pointDiffuse += vec4( uDiffuseColor, 1.0 ) * vec4( uPointLightColor, 1.0 ) * pointDiffuseWeight;
198-
199-
// all lights contribution summation
200-
201-
vec4 totalLight = vec4( uAmbientLightColor * uAmbientColor , 1.0 ); // orig
202-
// totalLight += vec4( uPointLightColor, 1.0 ) * ( pointDiffuse + pointSpecular );
203-
totalLight += vec4( uPointLightColor, 1.0 ) * ( pointDiffuse );
204-
205-
// with texture
206-
// gl_FragColor = vec4( diffuseTex.xyz + totalLight.xyz, 1.0 );
207-
208-
// without texture
209-
gl_FragColor = vec4( totalLight.xyz, 1.0 );
210-
211-
}
212-
</script>
213-
214-
215-
216-
217-
218-
219-
220-
221-
222-
223-
22418

22519

22620
<!-- ----- MAIN THREE.JS CODE ----- -->
@@ -237,9 +31,6 @@
23731
var dist_x = 0;
23832
var step = 0;
23933

240-
var imgc=document.getElementById("imgCanvas");
241-
var ictx=imgc.getContext("2d");
242-
24334

24435
function start() {
24536

@@ -284,75 +75,47 @@
28475

28576
// --- Lights
28677

287-
ambientLight = new THREE.AmbientLight( 0xffffff );
288-
scene.add( ambientLight );
78+
// ambientLight = new THREE.AmbientLight( 0xffffff );
79+
// scene.add( ambientLight );
28980

290-
pointLight = new THREE.PointLight( 0xffffff, 0.0 );
81+
pointLight = new THREE.PointLight( 0xffffff, 1.0 );
29182
scene.add( pointLight );
29283

29384
pointLight.position.set(0, 100, -200);
29485

295-
var sphere = new THREE.SphereGeometry( 100, 8, 8 );
296-
light = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffffff } ) );
297-
light.position = pointLight.position;
298-
light.scale.x = light.scale.y = light.scale.z = 0.05;
299-
scene.add(light);
30086

30187

30288
// MATERIAL
30389

304-
var ambient = 0x000000, diffuse = 0xffffff, specular = 0xffffff, shininess = 50.0, scale = 100;
305-
306-
diffTexture = new THREE.Texture(imgc);
307-
dispTexture = new THREE.Texture(imgc);
308-
90+
var ambient = 0xffffff, diffuse = 0x666666, specular = 0xffffff, shininess = 50.0;
30991

310-
heightmap = new Image();
311-
heightmap.src = 'uk_heightmap.jpg';
312-
313-
heightmap.onload = function() {
314-
imgc.width = heightmap.width;
315-
imgc.height = heightmap.height;
316-
317-
ictx.drawImage(heightmap, 0, 0, heightmap.width, heightmap.height);
318-
319-
diffTexture.needsUpdate = true;
320-
dispTexture.needsUpdate = true;
92+
dispTexture = new THREE.ImageUtils.loadTexture( 'uk_heightmap.jpg', new THREE.UVMapping(), function() {
32193
update();
322-
};
94+
});
32395

32496
var shader = THREE.ShaderLib[ "normalmap" ];
32597
uniforms = THREE.UniformsUtils.clone( shader.uniforms );
32698

32799
uniforms[ "enableDisplacement" ] = { type: 'i', value: 1 };
328-
uniforms[ "enableDiffuse" ] = { type: 'i', value: 0 };
329-
uniforms[ "tDiffuse" ].value = dispTexture;
330-
uniforms[ "tDiffuseOpacity" ] = { type: 'f', value: 1.0 };
331100
uniforms[ "tDisplacement" ] = { type: 't', value: dispTexture };
332101
uniforms[ "uDisplacementScale" ] = { type: 'f', value: 35 };
333-
334-
uniforms[ "tNormal" ] = { type: 't', value: new THREE.ImageUtils.loadTexture( 'flat.png' )};
335-
336-
uniforms[ "uDiffuseColor" ].value = new THREE.Color( diffuse );
337-
uniforms[ "uSpecularColor" ].value = new THREE.Color( specular );
338-
uniforms[ "uAmbientColor" ].value = new THREE.Color( ambient );
339-
uniforms[ "uShininess" ].value = shininess;
340102

341-
uniforms[ "uPointLightPos"] = { type: "v3", value: pointLight.position },
342-
uniforms[ "uPointLightColor" ] = {type: "c", value: new THREE.Color( pointLight.color )};
343-
uniforms[ "uAmbientLightColor" ] = {type: "c", value: new THREE.Color( ambientLight.color )};
103+
uniforms[ "enableDiffuse" ] = { type: 'i', value: 1 };
104+
uniforms[ "tDiffuse" ].value = dispTexture;
344105

345-
uniforms[ "uDisplacementPostScale" ] = {type: 'f', value: 50 };
106+
// uniforms[ "uAmbientColor" ].value = ambient;
107+
108+
// uniforms[ "uAmbientLightColor" ] = {type: "c", value: 0xffffff}
346109

347-
uniforms[ "bumpScale" ] = { type: "f", value: 10 };
348-
110+
uniforms[ "tNormal" ] = { type: 't', value: new THREE.ImageUtils.loadTexture( 'flat.png' )};
349111

350112

351113

352114
material = new THREE.ShaderMaterial( {
353115
uniforms: uniforms,
354-
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
355-
fragmentShader: document.getElementById( 'fragment_shader' ).textContent,
116+
vertexShader: shader.vertexShader,
117+
fragmentShader: shader.fragmentShader,
118+
lights: true,
356119
side: THREE.DoubleSide
357120
} );
358121

0 commit comments

Comments
 (0)