joshua/webgl-threejs-hello
1
0
Fork 0
mirror of https://github.com/seigler/webgl-threejs-hello synced 2025-07-27 01:36:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

⚡ Add post processing

Browse source
This commit is contained in:
Joshua Seigler 2018-10-11 04:24:57 -04:00
parent f6494780c3
commit c6580a8fe7
8 changed files with 123 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Brunch - Three.js - es6</title> <title>Brunch - Three.js - es6</title>
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head> </head>
<body> <body>
<script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="app.js"></script>

28
app/js/components/Bean.js Normal file
View file

@ -0,0 +1,28 @@
import props from 'js/core/props';
class Bean extends THREE.Object3D {
constructor() {
super();
this.radius = 1;
const material = new THREE.MeshStandardMaterial({
color: '#FFFFFF',
});
const geometry = new THREE.SphereGeometry(this.radius, 20, 20);
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.castShadow = true;
this.add(this.mesh);
this.position.z += this.radius / 2 + 0.01;
this.onUpdate = this.onUpdate.bind(this);
}
onUpdate() {
// this.rotation.x += props.rotation;
// this.rotation.y += props.rotation;
}
}
module.exports = Bean;

4
app/js/components/Eyeball.js
View file

@ -40,8 +40,8 @@ class Eyeball extends THREE.Object3D {
} }
onUpdate() { onUpdate() {
this.rotation.x += props.rotation; // this.rotation.x += props.rotation;
this.rotation.y += props.rotation; // this.rotation.y += props.rotation;
} }
} }

20
app/js/components/Ground.js
View file

@ -0,0 +1,20 @@
import props from 'js/core/props';
class Ground extends THREE.Object3D {
constructor() {
super();
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x050505 });
material.color.setHSL(0.095, 1, 0.75);
const geometry = new THREE.PlaneBufferGeometry(10000, 10000);
let mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = -Math.PI/2;
mesh.position.y = -1;
mesh.receiveShadow = true;
this.add(mesh);
}
}
module.exports = Ground;

51
app/js/components/Light.js
View file

@ -1,26 +1,39 @@
export function createLight() { class Lighting extends THREE.Object3D {
constructor() {
super();
var lightGeometry = new THREE.SphereGeometry(0.1); let dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 2 );
var lightMaterial = new THREE.MeshStandardMaterial({ dirLight.castShadow = true;
emissive: 0xffffee, dirLight.shadow.mapSize.width = 1024;
emissiveIntensity: 1, dirLight.shadow.mapSize.heigth = 1024;
color: 0x000000 dirLight.shadow.radius = 3;
});
var light = new THREE.PointLight(0xffffff, 1, 20, 2); let d = 10;
light.power = 50; dirLight.shadow.camera.left = -d;
light.castShadow = true; dirLight.shadow.camera.right = d;
light.shadow.mapSize.width = 512; dirLight.shadow.camera.top = d;
light.shadow.mapSize.heigth = 512; dirLight.shadow.camera.bottom = -d;
light.shadow.radius = 1.5; dirLight.shadow.camera.far = 3500;
light.add(new THREE.Mesh(lightGeometry, lightMaterial)); this.add(dirLight);
light.position.set(0, 5, 3); this.add(new THREE.DirectionalLightHelper( dirLight, 1 ));
return light; let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 4, 0 );
this.add( hemiLight );
this.add( new THREE.HemisphereLightHelper( hemiLight, 1 ) );
this.onUpdate = this.onUpdate.bind(this);
}
onUpdate() {
}
} }
export function createHemisphereLight() { module.exports = Lighting;
return new THREE.HemisphereLight(0x303F9F, 0x111111, 3);
}

43
app/js/core/Webgl.js
View file

@ -14,27 +14,42 @@ export default class Webgl {
this._renderer.gammaInput = true; this._renderer.gammaInput = true;
this._renderer.gammaOutput = true; this._renderer.gammaOutput = true;
this._renderer.shadowMap.enabled = true; this._renderer.shadowMap.enabled = true;
this._renderer.shadowMap.bias = 0.0001; this._renderer.shadowMap.bias = -0.0001;
this._renderer.shadowMap.type = THREE.PCFSoftShadowMap; this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.dom = this._renderer.domElement; this.dom = this._renderer.domElement;
this.usePostprocessing = false; this.usePostprocessing = true;
this._composer = false; this._passes = [
this._passes = {}; new THREE.RenderPass(this.scene, this.camera),
// new THREE.SMAAPass(),
];
this.initPostprocessing(); this.initPostprocessing();
this.onResize(w, h); this.onResize(w, h);
this.onUpdate = this.onUpdate.bind(this); this.onUpdate = this.onUpdate.bind(this);
this.onResize = this.onResize.bind(this); this.onResize = this.onResize.bind(this);
this._controls = new THREE.OrbitControls(this.camera, this._renderer.domElement);
//this._controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
this._controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
this._controls.dampingFactor = 0.25;
this._controls.screenSpacePanning = false;
this._controls.minDistance = 10;
this._controls.maxDistance = 200;
this._controls.maxPolarAngle = Math.PI / 2;
} }
initPostprocessing() { initPostprocessing() {
if (!this.usePostprocessing) return; if (!this.usePostprocessing) return;
// TODO add WAGNER this._composer = new THREE.EffectComposer(this._renderer);
this._composer = new WAGNER.Composer(this._renderer); let ssaoShader = THREE.SSAOShader;
this._composer.setSize(this.width, this.height); ssaoShader.uniforms.onlyAO = true;
this._passes.vignettePass = new WAGNER.VignettePass(); this._passes.forEach((effect, i) => {
this._passes.fxaaPass = new WAGNER.FXAAPass(); if (i == this._passes.length - 1) {
effect.renderToScreen = true;
}
this._composer.addPass(effect);
});
} }
add(mesh) { add(mesh) {
@ -42,14 +57,9 @@ export default class Webgl {
} }
onUpdate() { onUpdate() {
this._controls.update();
if (this.usePostprocessing) { if (this.usePostprocessing) {
this._composer.reset();
this._composer.renderer.clear();
this._composer.render(this.scene, this.camera); this._composer.render(this.scene, this.camera);
// TODO loop to passes
this._composer.pass(this._passes.fxaaPass);
this._composer.pass(this._passes.vignettePass);
this._composer.toScreen();
} else { } else {
this._renderer.render(this.scene, this.camera); this._renderer.render(this.scene, this.camera);
} }
@ -63,5 +73,8 @@ export default class Webgl {
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
this._renderer.setSize(w, h); this._renderer.setSize(w, h);
if (this.usePostprocessing) {
this._composer.setSize(w, h);
}
} }
} }

19
app/main.js
View file

@ -1,7 +1,9 @@
import Webgl from 'js/core/Webgl'; import Webgl from 'js/core/Webgl';
import loop from 'js/core/Loop'; import loop from 'js/core/Loop';
import props from 'js/core/props'; import props from 'js/core/props';
import Eyeball from 'js/components/Eyeball'; import Bean from 'js/components/Bean';
import Ground from 'js/components/Ground';
import Light from 'js/components/Light';
import { createLight, createHemisphereLight } from 'js/components/Light'; import { createLight, createHemisphereLight } from 'js/components/Light';
// ## // ##
@ -17,16 +19,17 @@ const gui = new dat.GUI();
gui.add(props, 'rotation', 0.01, 1); gui.add(props, 'rotation', 0.01, 1);
gui.close(); gui.close();
// ## webgl.add(new Ground());
// EXAMPLE LIGHT
webgl.add(createLight()); const light = new Light();
webgl.add(createHemisphereLight()); webgl.add(light);
loop.add(light.onUpdate);
// ## // ##
// EXAMPLE BOX // EXAMPLE BOX
const eyeball = new Eyeball(); const bean = new Bean();
webgl.add(eyeball); webgl.add(bean);
loop.add(eyeball.onUpdate); loop.add(bean.onUpdate);
// ## // ##
// RENDERER // RENDERER

2
brunch-config.coffee
View file

@ -9,5 +9,5 @@ exports.config =
joinTo: 'app.js' joinTo: 'app.js'
npm: npm:
globals: globals:
THREE: 'three-full' THREE: 'three-full',
dat: 'dat-gui' dat: 'dat-gui'