joshua/webgl-threejs-hello
1
0
Fork 0
mirror of https://github.com/seigler/webgl-threejs-hello synced 2025-07-26 01:06:15 +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">
<title>Brunch - Three.js - es6</title>
<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>
<body>
<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() {
this.rotation.x += props.rotation;
this.rotation.y += props.rotation;
// this.rotation.x += 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({
emissive: 0xffffee,
emissiveIntensity: 1,
color: 0x000000
});
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.heigth = 1024;
dirLight.shadow.radius = 3;
var light = new THREE.PointLight(0xffffff, 1, 20, 2);
light.power = 50;
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.mapSize.heigth = 512;
light.shadow.radius = 1.5;
let d = 10;
dirLight.shadow.camera.left = -d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = -d;
dirLight.shadow.camera.far = 3500;
light.add(new THREE.Mesh(lightGeometry, lightMaterial));
light.position.set(0, 5, 3);
this.add(dirLight);
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() {
return new THREE.HemisphereLight(0x303F9F, 0x111111, 3);
}
module.exports = Lighting;

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

@ -14,27 +14,42 @@ export default class Webgl {
this._renderer.gammaInput = true;
this._renderer.gammaOutput = 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.dom = this._renderer.domElement;
this.usePostprocessing = false;
this._composer = false;
this._passes = {};
this.usePostprocessing = true;
this._passes = [
new THREE.RenderPass(this.scene, this.camera),
// new THREE.SMAAPass(),
];
this.initPostprocessing();
this.onResize(w, h);
this.onUpdate = this.onUpdate.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() {
if (!this.usePostprocessing) return;
// TODO add WAGNER
this._composer = new WAGNER.Composer(this._renderer);
this._composer.setSize(this.width, this.height);
this._passes.vignettePass = new WAGNER.VignettePass();
this._passes.fxaaPass = new WAGNER.FXAAPass();
this._composer = new THREE.EffectComposer(this._renderer);
let ssaoShader = THREE.SSAOShader;
ssaoShader.uniforms.onlyAO = true;
this._passes.forEach((effect, i) => {
if (i == this._passes.length - 1) {
effect.renderToScreen = true;
}
this._composer.addPass(effect);
});
}
add(mesh) {
@ -42,14 +57,9 @@ export default class Webgl {
}
onUpdate() {
this._controls.update();
if (this.usePostprocessing) {
this._composer.reset();
this._composer.renderer.clear();
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 {
this._renderer.render(this.scene, this.camera);
}
@ -63,5 +73,8 @@ export default class Webgl {
this.camera.updateProjectionMatrix();
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 loop from 'js/core/Loop';
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';
// ##
@ -17,16 +19,17 @@ const gui = new dat.GUI();
gui.add(props, 'rotation', 0.01, 1);
gui.close();
// ##
// EXAMPLE LIGHT
webgl.add(createLight());
webgl.add(createHemisphereLight());
webgl.add(new Ground());
const light = new Light();
webgl.add(light);
loop.add(light.onUpdate);
// ##
// EXAMPLE BOX
const eyeball = new Eyeball();
webgl.add(eyeball);
loop.add(eyeball.onUpdate);
const bean = new Bean();
webgl.add(bean);
loop.add(bean.onUpdate);
// ##
// RENDERER

2
brunch-config.coffee
View file

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