Skip to content

Commit cc1ceec

Browse files
davidevignozzidavidevignozzi
committed
🚚 Post processing
1 parent ba711bc commit cc1ceec

File tree

15 files changed

+396
-127
lines changed

15 files changed

+396
-127
lines changed

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>32 - Modified materials</title>
6+
<title>33 - Post-processing</title>
77
<link rel="stylesheet" href="./style.css">
88
</head>
99
<body>

‎src/script.js‎

Lines changed: 176 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import * as THREE from 'three'
22
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
33
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
44
import GUI from 'lil-gui'
5+
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
6+
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
7+
import { DotScreenPass } from 'three/examples/jsm/postprocessing/DotScreenPass.js'
8+
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
9+
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
10+
import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js'
11+
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js'
12+
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
13+
import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js'
514

615
/**
716
* Base
@@ -18,9 +27,9 @@ const scene = new THREE.Scene()
1827
/**
1928
* Loaders
2029
*/
21-
const textureLoader = new THREE.TextureLoader()
2230
const gltfLoader = new GLTFLoader()
2331
const cubeTextureLoader = new THREE.CubeTextureLoader()
32+
const textureLoader = new THREE.TextureLoader()
2433

2534
/**
2635
* Update all materials
@@ -31,7 +40,7 @@ const updateAllMaterials = () =>
3140
{
3241
if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial)
3342
{
34-
child.material.envMapIntensity = 1
43+
child.material.envMapIntensity = 2.5
3544
child.material.needsUpdate = true
3645
child.castShadow = true
3746
child.receiveShadow = true
@@ -55,128 +64,21 @@ environmentMap.colorSpace = THREE.SRGBColorSpace
5564
scene.background = environmentMap
5665
scene.environment = environmentMap
5766

58-
/**
59-
* Material
60-
*/
61-
62-
// Textures
63-
const mapTexture = textureLoader.load('/models/LeePerrySmith/color.jpg')
64-
mapTexture.colorSpace = THREE.SRGBColorSpace
65-
const normalTexture = textureLoader.load('/models/LeePerrySmith/normal.jpg')
66-
67-
// Material
68-
const material = new THREE.MeshStandardMaterial( {
69-
map: mapTexture,
70-
normalMap: normalTexture
71-
})
72-
73-
const depthMaterial = new THREE.MeshDepthMaterial({
74-
depthPacking: THREE.RGBADepthPacking
75-
})
76-
77-
const customUniforms = {
78-
uTime: { value: 0 }
79-
}
80-
81-
material.onBeforeCompile = (shader) =>
82-
{
83-
shader.uniforms.uTime = customUniforms.uTime
84-
85-
shader.vertexShader = shader.vertexShader.replace(
86-
'#include <common>',
87-
`
88-
#include <common>
89-
90-
uniform float uTime;
91-
92-
mat2 get2dRotateMatrix(float _angle)
93-
{
94-
return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
95-
}
96-
`
97-
)
98-
99-
shader.vertexShader = shader.vertexShader.replace(
100-
'#include <beginnormal_vertex>',
101-
`
102-
#include <beginnormal_vertex>
103-
104-
float angle = (sin(position.y + uTime)) * 0.4;
105-
mat2 rotateMatrix = get2dRotateMatrix(angle);
106-
107-
objectNormal.xz = rotateMatrix * objectNormal.xz;
108-
`
109-
)
110-
shader.vertexShader = shader.vertexShader.replace(
111-
'#include <begin_vertex>',
112-
`
113-
#include <begin_vertex>
114-
115-
transformed.xz = rotateMatrix * transformed.xz;
116-
`
117-
)
118-
}
119-
120-
depthMaterial.onBeforeCompile = (shader) =>
121-
{
122-
shader.uniforms.uTime = customUniforms.uTime
123-
shader.vertexShader = shader.vertexShader.replace(
124-
'#include <common>',
125-
`
126-
#include <common>
127-
128-
uniform float uTime;
129-
130-
mat2 get2dRotateMatrix(float _angle)
131-
{
132-
return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
133-
}
134-
`
135-
)
136-
shader.vertexShader = shader.vertexShader.replace(
137-
'#include <begin_vertex>',
138-
`
139-
#include <begin_vertex>
140-
141-
float angle = (sin(position.y + uTime)) * 0.4;
142-
mat2 rotateMatrix = get2dRotateMatrix(angle);
143-
144-
transformed.xz = rotateMatrix * transformed.xz;
145-
`
146-
)
147-
}
148-
14967
/**
15068
* Models
15169
*/
15270
gltfLoader.load(
153-
'/models/LeePerrySmith/LeePerrySmith.glb',
71+
'/models/DamagedHelmet/glTF/DamagedHelmet.gltf',
15472
(gltf) =>
15573
{
156-
// Model
157-
const mesh = gltf.scene.children[0]
158-
mesh.rotation.y = Math.PI * 0.5
159-
mesh.material = material // Update the material
160-
mesh.customDepthMaterial = depthMaterial // Update the depth material
161-
scene.add(mesh)
162-
163-
// Update materials
74+
gltf.scene.scale.set(2, 2, 2)
75+
gltf.scene.rotation.y = Math.PI * 0.5
76+
scene.add(gltf.scene)
77+
16478
updateAllMaterials()
16579
}
16680
)
16781

168-
/**
169-
* Plane
170-
*/
171-
const plane = new THREE.Mesh(
172-
new THREE.PlaneGeometry(15, 15, 15),
173-
new THREE.MeshStandardMaterial()
174-
)
175-
plane.rotation.y = Math.PI
176-
plane.position.y = - 5
177-
plane.position.z = 5
178-
scene.add(plane)
179-
18082
/**
18183
* Lights
18284
*/
@@ -185,7 +87,7 @@ directionalLight.castShadow = true
18587
directionalLight.shadow.mapSize.set(1024, 1024)
18688
directionalLight.shadow.camera.far = 15
18789
directionalLight.shadow.normalBias = 0.05
188-
directionalLight.position.set(0.25, 2, - 2.25)
90+
directionalLight.position.set(0.25, 3, - 2.25)
18991
scene.add(directionalLight)
19092

19193
/**
@@ -209,6 +111,10 @@ window.addEventListener('resize', () =>
209111
// Update renderer
210112
renderer.setSize(sizes.width, sizes.height)
211113
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
114+
115+
// Update effect composer
116+
effectComposer.setSize(sizes.width, sizes.height)
117+
effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
212118
})
213119

214120
/**
@@ -232,11 +138,160 @@ const renderer = new THREE.WebGLRenderer({
232138
})
233139
renderer.shadowMap.enabled = true
234140
renderer.shadowMap.type = THREE.PCFShadowMap
235-
renderer.toneMapping = THREE.ACESFilmicToneMapping
236-
renderer.toneMappingExposure = 1
141+
renderer.toneMapping = THREE.ReinhardToneMapping
142+
renderer.toneMappingExposure = 1.5
237143
renderer.setSize(sizes.width, sizes.height)
238144
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
239145

146+
/**
147+
* Post processing
148+
*/
149+
const renderTarget = new THREE.WebGLRenderTarget(
150+
800,
151+
600,
152+
{
153+
samples: 2
154+
}
155+
)
156+
157+
// Effect composer
158+
const effectComposer = new EffectComposer(renderer, renderTarget)
159+
effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
160+
effectComposer.setSize(sizes.width, sizes.height)
161+
162+
// Render pass
163+
const renderPass = new RenderPass(scene, camera)
164+
effectComposer.addPass(renderPass)
165+
166+
// Dot screen pass
167+
const dotScreenPass = new DotScreenPass()
168+
dotScreenPass.enabled = false
169+
effectComposer.addPass(dotScreenPass)
170+
171+
// Glitch pass
172+
const glitchPass = new GlitchPass()
173+
glitchPass.goWild = true
174+
glitchPass.enabled = false
175+
effectComposer.addPass(glitchPass)
176+
177+
// RGB Shift pass
178+
const rgbShiftPass = new ShaderPass(RGBShiftShader)
179+
rgbShiftPass.enabled = false
180+
effectComposer.addPass(rgbShiftPass)
181+
182+
// Gamma correction pass
183+
const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader)
184+
effectComposer.addPass(gammaCorrectionPass)
185+
186+
// Antialias pass
187+
if(renderer.getPixelRatio() === 1 && !renderer.capabilities.isWebGL2)
188+
{
189+
const smaaPass = new SMAAPass()
190+
effectComposer.addPass(smaaPass)
191+
192+
console.log('Using SMAA')
193+
}
194+
195+
// Unreal Bloom pass
196+
const unrealBloomPass = new UnrealBloomPass()
197+
unrealBloomPass.enabled = false
198+
effectComposer.addPass(unrealBloomPass)
199+
200+
unrealBloomPass.strength = 0.3
201+
unrealBloomPass.radius = 1
202+
unrealBloomPass.threshold = 0.6
203+
204+
gui.add(unrealBloomPass, 'enabled')
205+
gui.add(unrealBloomPass, 'strength').min(0).max(2).step(0.001)
206+
gui.add(unrealBloomPass, 'radius').min(0).max(2).step(0.001)
207+
gui.add(unrealBloomPass, 'threshold').min(0).max(1).step(0.001)
208+
209+
// Tin pass
210+
const TintShader = {
211+
uniforms:
212+
{
213+
tDiffuse: { value: null },
214+
uTint: { value: null }
215+
},
216+
vertexShader: `
217+
varying vec2 vUv;
218+
219+
void main()
220+
{
221+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
222+
223+
vUv = uv;
224+
}
225+
`,
226+
fragmentShader: `
227+
uniform sampler2D tDiffuse;
228+
uniform vec3 uTint;
229+
230+
varying vec2 vUv;
231+
232+
void main()
233+
{
234+
vec4 color = texture2D(tDiffuse, vUv);
235+
color.rgb += uTint;
236+
237+
gl_FragColor = color;
238+
}
239+
`
240+
}
241+
242+
const tintPass = new ShaderPass(TintShader)
243+
tintPass.material.uniforms.uTint.value = new THREE.Vector3()
244+
effectComposer.addPass(tintPass)
245+
246+
gui.add(tintPass.material.uniforms.uTint.value, 'x').min(- 1).max(1).step(0.001).name('red')
247+
gui.add(tintPass.material.uniforms.uTint.value, 'y').min(- 1).max(1).step(0.001).name('green')
248+
gui.add(tintPass.material.uniforms.uTint.value, 'z').min(- 1).max(1).step(0.001).name('blue')
249+
250+
// Displacement pass
251+
const DisplacementShader = {
252+
uniforms:
253+
{
254+
tDiffuse: { value: null },
255+
uTime: { value: null },
256+
uNormalMap: { value: null }
257+
},
258+
vertexShader: `
259+
varying vec2 vUv;
260+
261+
void main()
262+
{
263+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
264+
265+
vUv = uv;
266+
}
267+
`,
268+
fragmentShader: `
269+
uniform sampler2D tDiffuse;
270+
uniform float uTime;
271+
uniform sampler2D uNormalMap;
272+
273+
varying vec2 vUv;
274+
275+
void main()
276+
{
277+
vec3 normalColor = texture2D(uNormalMap, vUv).xyz * 2.0 - 1.0;
278+
vec2 newUv = vUv + normalColor.xy * 0.1;
279+
vec4 color = texture2D(tDiffuse, newUv);
280+
281+
vec3 lightDirection = normalize(vec3(- 1.0, 1.0, 0.0));
282+
float lightness = clamp(dot(normalColor, lightDirection), 0.0, 1.0);
283+
color.rgb += lightness * 2.0;
284+
285+
gl_FragColor = color;
286+
}
287+
`
288+
}
289+
290+
const displacementPass = new ShaderPass(DisplacementShader)
291+
displacementPass.material.uniforms.uTime.value = 0
292+
displacementPass.material.uniforms.uNormalMap.value = textureLoader.load('/textures/interfaceNormalMap.png')
293+
effectComposer.addPass(displacementPass)
294+
240295
/**
241296
* Animate
242297
*/
@@ -246,14 +301,15 @@ const tick = () =>
246301
{
247302
const elapsedTime = clock.getElapsedTime()
248303

249-
// Update material
250-
customUniforms.uTime.value = elapsedTime
304+
// Update passes
305+
displacementPass.material.uniforms.uTime.value = elapsedTime
251306

252307
// Update controls
253308
controls.update()
254309

255310
// Render
256-
renderer.render(scene, camera)
311+
// renderer.render(scene, camera)
312+
effectComposer.render()
257313

258314
// Call tick again on the next frame
259315
window.requestAnimationFrame(tick)

‎static/models/DamagedHelmet/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Damaged Helmet
2+
3+
## Screenshot
4+
5+
![screenshot](screenshot/screenshot.png)
6+
7+
## License Information
8+
9+
Battle Damaged Sci-fi Helmet - PBR by [theblueturtle_](https://sketchfab.com/theblueturtle_), published under a Creative Commons Attribution-NonCommercial license
10+
11+
https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4
12+
13+
## Modifications
14+
15+
The original model was built on an early draft of glTF 2.0 that did not become final. This new model has been imported and re-exported from Blender to bring it into alignment with the final release glTF 2.0 specification.

‎static/models/DamagedHelmet/glTF/DamagedHelmet.bin‎

545 KB
Binary file not shown.

0 commit comments

Comments
 (0)