├── LICENSE
├── base.css
├── index.html
├── main.js
└── resources
├── negx.jpg
├── negy.jpg
├── negz.jpg
├── posx.jpg
├── posy.jpg
├── posz.jpg
└── readme.txt
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 simondevyoutube
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/base.css:
--------------------------------------------------------------------------------
1 | body {
2 | width: 100%;
3 | height: 100%;
4 | position: absolute;
5 | background: #000000;
6 | margin: 0;
7 | padding: 0;
8 | overscroll-behavior: none;
9 | }
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ThreeJS Tutorial: PostProcessing
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118/build/three.module.js';
2 |
3 | import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';
4 |
5 | import {EffectComposer} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/EffectComposer.js';
6 | import {RenderPass} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/RenderPass.js';
7 | import {UnrealBloomPass} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/UnrealBloomPass.js';
8 | import {GlitchPass} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/GlitchPass.js';
9 | import {ShaderPass} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/ShaderPass.js';
10 | import {SSAOPass} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/postprocessing/SSAOPass.js';
11 |
12 | import {LuminosityShader} from 'https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/shaders/LuminosityShader.js';
13 |
14 | const _VS = `
15 | varying vec2 vUv;
16 |
17 | void main() {
18 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
19 | vUv = uv;
20 | }
21 | `;
22 |
23 | const _FS = `
24 | #include
25 |
26 | uniform sampler2D tDiffuse;
27 |
28 | varying vec2 vUv;
29 |
30 | void main() {
31 | vec4 diffuse = texture2D(tDiffuse, vUv);
32 |
33 | gl_FragColor = (diffuse - 0.5) * 4.0 + 0.5;
34 | }
35 | `;
36 |
37 | const CrapShader = {
38 | uniforms: {
39 | tDiffuse: null,
40 | },
41 | vertexShader: _VS,
42 | fragmentShader: _FS,
43 | };
44 |
45 |
46 | class PostProcessingDemo {
47 | constructor() {
48 | this._Initialize();
49 | }
50 |
51 | _Initialize() {
52 | this._threejs = new THREE.WebGLRenderer({
53 | antialias: true,
54 | });
55 | this._threejs.shadowMap.enabled = true;
56 | this._threejs.shadowMap.type = THREE.PCFSoftShadowMap;
57 | this._threejs.setPixelRatio(window.devicePixelRatio);
58 | this._threejs.setSize(window.innerWidth, window.innerHeight);
59 |
60 | document.body.appendChild(this._threejs.domElement);
61 |
62 | window.addEventListener('resize', () => {
63 | this._OnWindowResize();
64 | }, false);
65 |
66 | const fov = 60;
67 | const aspect = 1920 / 1080;
68 | const near = 1.0;
69 | const far = 500.0;
70 | this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
71 | this._camera.position.set(75, 20, 0);
72 |
73 | this._scene = new THREE.Scene();
74 |
75 | this._composer = new EffectComposer(this._threejs);
76 | this._composer.addPass(new RenderPass(this._scene, this._camera));
77 | this._composer.addPass(new UnrealBloomPass({x: 1024, y: 1024}, 2.0, 0.0, 0.75));
78 | this._composer.addPass(new GlitchPass());
79 | this._composer.addPass(new ShaderPass(CrapShader));
80 |
81 | let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
82 | light.position.set(20, 100, 10);
83 | light.target.position.set(0, 0, 0);
84 | light.castShadow = true;
85 | light.shadow.bias = -0.001;
86 | light.shadow.mapSize.width = 2048;
87 | light.shadow.mapSize.height = 2048;
88 | light.shadow.camera.near = 0.1;
89 | light.shadow.camera.far = 500.0;
90 | light.shadow.camera.near = 0.5;
91 | light.shadow.camera.far = 500.0;
92 | light.shadow.camera.left = 100;
93 | light.shadow.camera.right = -100;
94 | light.shadow.camera.top = 100;
95 | light.shadow.camera.bottom = -100;
96 | this._scene.add(light);
97 |
98 | light = new THREE.AmbientLight(0x101010);
99 | this._scene.add(light);
100 |
101 | const controls = new OrbitControls(
102 | this._camera, this._threejs.domElement);
103 | controls.target.set(0, 20, 0);
104 | controls.update();
105 |
106 | const loader = new THREE.CubeTextureLoader();
107 | const texture = loader.load([
108 | './resources/posx.jpg',
109 | './resources/negx.jpg',
110 | './resources/posy.jpg',
111 | './resources/negy.jpg',
112 | './resources/posz.jpg',
113 | './resources/negz.jpg',
114 | ]);
115 | this._scene.background = texture;
116 |
117 | const plane = new THREE.Mesh(
118 | new THREE.PlaneGeometry(1000, 1000, 10, 10),
119 | new THREE.MeshStandardMaterial({
120 | color: 0x808080,
121 | }));
122 | plane.castShadow = false;
123 | plane.receiveShadow = true;
124 | plane.rotation.x = -Math.PI / 2;
125 | this._scene.add(plane);
126 |
127 | const knot = new THREE.Mesh(
128 | new THREE.TorusKnotGeometry(5, 1.5, 100, 16),
129 | new THREE.MeshStandardMaterial({
130 | color: 0xFFFFFF,
131 | }));
132 | knot.position.set(0, 15, 0);
133 | knot.castShadow = true;
134 | knot.receiveShadow = true;
135 | this._scene.add(knot);
136 | this._knot = knot;
137 |
138 | for (let x = -8; x < 8; x++) {
139 | for (let y = -8; y < 8; y++) {
140 | const box = new THREE.Mesh(
141 | new THREE.BoxGeometry(2, 10, 2),
142 | new THREE.MeshStandardMaterial({
143 | color: 0x808080,
144 | }));
145 | box.position.set(Math.random() + x * 20, Math.random() * 4.0 + 5.0, Math.random() + y * 20);
146 | box.castShadow = true;
147 | box.receiveShadow = true;
148 | this._scene.add(box);
149 | }
150 | }
151 |
152 | this._RAF();
153 | }
154 |
155 | _OnWindowResize() {
156 | this._camera.aspect = window.innerWidth / window.innerHeight;
157 | this._camera.updateProjectionMatrix();
158 | this._threejs.setSize(window.innerWidth, window.innerHeight);
159 | this._composer.setSize(window.innerWidth, window.innerHeight);
160 | }
161 |
162 | _RAF() {
163 | requestAnimationFrame(() => {
164 | // this._knot.rotateY(0.01);
165 | // this._knot.rotateZ(0.005);
166 |
167 | // this._threejs.render(this._scene, this._camera);
168 | this._composer.render();
169 | this._RAF();
170 | });
171 | }
172 | }
173 |
174 |
175 | let _APP = null;
176 |
177 | window.addEventListener('DOMContentLoaded', () => {
178 | _APP = new PostProcessingDemo();
179 | });
180 |
--------------------------------------------------------------------------------
/resources/negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/negx.jpg
--------------------------------------------------------------------------------
/resources/negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/negy.jpg
--------------------------------------------------------------------------------
/resources/negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/negz.jpg
--------------------------------------------------------------------------------
/resources/posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/posx.jpg
--------------------------------------------------------------------------------
/resources/posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/posy.jpg
--------------------------------------------------------------------------------
/resources/posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing/0c9f62e14636b8cfa29dfbca0f40a814b6000130/resources/posz.jpg
--------------------------------------------------------------------------------
/resources/readme.txt:
--------------------------------------------------------------------------------
1 | Author
2 | ======
3 |
4 | This is the work of Emil Persson, aka Humus.
5 | http://www.humus.name
6 |
7 |
8 |
9 | License
10 | =======
11 |
12 | This work is licensed under a Creative Commons Attribution 3.0 Unported License.
13 | http://creativecommons.org/licenses/by/3.0/
14 |
--------------------------------------------------------------------------------