bolajiev commited on
Commit ·
a60c2be
1
Parent(s): 6403336
Add UnrealBloom post-processing — neon/emissive materials now glow
Browse files- compiler.py +18 -1
compiler.py
CHANGED
|
@@ -130,6 +130,9 @@ TEMPLATE = """<!DOCTYPE html>
|
|
| 130 |
<script type="module">
|
| 131 |
import * as THREE from 'three';
|
| 132 |
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
|
|
|
|
|
|
|
| 133 |
|
| 134 |
const scene = new THREE.Scene();
|
| 135 |
scene.background = new THREE.Color('__BG__');
|
|
@@ -141,6 +144,8 @@ TEMPLATE = """<!DOCTYPE html>
|
|
| 141 |
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
| 142 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
| 143 |
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
|
|
|
|
|
| 144 |
document.body.appendChild(renderer.domElement);
|
| 145 |
|
| 146 |
const controls = new OrbitControls(camera, renderer.domElement);
|
|
@@ -155,13 +160,24 @@ TEMPLATE = """<!DOCTYPE html>
|
|
| 155 |
// ---- objects ----
|
| 156 |
__OBJECTS__
|
| 157 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 158 |
const clock = new THREE.Clock();
|
| 159 |
function animate() {
|
| 160 |
requestAnimationFrame(animate);
|
| 161 |
const t = clock.getElapsedTime();
|
| 162 |
__ANIM__
|
| 163 |
controls.update();
|
| 164 |
-
|
| 165 |
}
|
| 166 |
animate();
|
| 167 |
|
|
@@ -169,6 +185,7 @@ TEMPLATE = """<!DOCTYPE html>
|
|
| 169 |
camera.aspect = window.innerWidth / window.innerHeight;
|
| 170 |
camera.updateProjectionMatrix();
|
| 171 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
| 172 |
});
|
| 173 |
</script>
|
| 174 |
</body>
|
|
|
|
| 130 |
<script type="module">
|
| 131 |
import * as THREE from 'three';
|
| 132 |
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
| 133 |
+
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
| 134 |
+
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
| 135 |
+
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
| 136 |
|
| 137 |
const scene = new THREE.Scene();
|
| 138 |
scene.background = new THREE.Color('__BG__');
|
|
|
|
| 144 |
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
| 145 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
| 146 |
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
| 147 |
+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
| 148 |
+
renderer.toneMappingExposure = 1.1;
|
| 149 |
document.body.appendChild(renderer.domElement);
|
| 150 |
|
| 151 |
const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
|
| 160 |
// ---- objects ----
|
| 161 |
__OBJECTS__
|
| 162 |
|
| 163 |
+
// ---- bloom post-processing ----
|
| 164 |
+
const composer = new EffectComposer(renderer);
|
| 165 |
+
composer.addPass(new RenderPass(scene, camera));
|
| 166 |
+
const bloom = new UnrealBloomPass(
|
| 167 |
+
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
| 168 |
+
0.9, // strength
|
| 169 |
+
0.4, // radius
|
| 170 |
+
0.0 // threshold (0 = everything blooms a little)
|
| 171 |
+
);
|
| 172 |
+
composer.addPass(bloom);
|
| 173 |
+
|
| 174 |
const clock = new THREE.Clock();
|
| 175 |
function animate() {
|
| 176 |
requestAnimationFrame(animate);
|
| 177 |
const t = clock.getElapsedTime();
|
| 178 |
__ANIM__
|
| 179 |
controls.update();
|
| 180 |
+
composer.render();
|
| 181 |
}
|
| 182 |
animate();
|
| 183 |
|
|
|
|
| 185 |
camera.aspect = window.innerWidth / window.innerHeight;
|
| 186 |
camera.updateProjectionMatrix();
|
| 187 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
| 188 |
+
composer.setSize(window.innerWidth, window.innerHeight);
|
| 189 |
});
|
| 190 |
</script>
|
| 191 |
</body>
|