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

⚡ Apply halftone postprocessing

Browse source
This commit is contained in:
Joshua Seigler 2018-10-11 12:10:28 -04:00
parent c6580a8fe7
commit ee38101670
3 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ class Ground extends THREE.Object3D {
super(); super();
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x050505 }); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x050505 });
material.color.setHSL(0.095, 1, 0.75); material.color.setHSL(0.095, 0.4, 0.5);
const geometry = new THREE.PlaneBufferGeometry(10000, 10000); const geometry = new THREE.PlaneBufferGeometry(10000, 10000);
let mesh = new THREE.Mesh(geometry, material); let mesh = new THREE.Mesh(geometry, material);

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

@ -2,8 +2,10 @@ class Lighting extends THREE.Object3D {
constructor() { constructor() {
super(); super();
let lightDirection = 0;
let dirLight = new THREE.DirectionalLight( 0xffffff, 1 ); let dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 ); dirLight.color.setHSL( 0.095, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 ); dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 2 ); dirLight.position.multiplyScalar( 2 );
@ -20,14 +22,14 @@ class Lighting extends THREE.Object3D {
dirLight.shadow.camera.far = 3500; dirLight.shadow.camera.far = 3500;
this.add(dirLight); this.add(dirLight);
this.add(new THREE.DirectionalLightHelper( dirLight, 1 )); // this.add(new THREE.DirectionalLightHelper( dirLight, 1 ));
let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 ); let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 ); hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); hemiLight.groundColor.setHSL( 0.095, 1, 0.6 );
hemiLight.position.set( 0, 4, 0 ); hemiLight.position.set( 0, 4, 0 );
this.add( hemiLight ); this.add( hemiLight );
this.add( new THREE.HemisphereLightHelper( hemiLight, 1 ) ); // this.add( new THREE.HemisphereLightHelper( hemiLight, 1 ) );
this.onUpdate = this.onUpdate.bind(this); this.onUpdate = this.onUpdate.bind(this);
} }

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

@ -1,6 +1,9 @@
export default class Webgl { export default class Webgl {
constructor(w, h) { constructor(w, h) {
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
let fogColor = new THREE.Color().setHSL( 0.6, 1, 0.6 );
this.scene.background = fogColor;
this.scene.fog = new THREE.Fog(fogColor, 0.0025, 100);
this.camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 1000); this.camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 1000);
this.camera.position.z = 10; this.camera.position.z = 10;
@ -10,7 +13,6 @@ export default class Webgl {
alpha: false, alpha: false,
}); });
this._renderer.setPixelRatio(window.devicePixelRatio); this._renderer.setPixelRatio(window.devicePixelRatio);
this._renderer.setClearColor(0x0c171a);
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;
@ -21,7 +23,7 @@ export default class Webgl {
this.usePostprocessing = true; this.usePostprocessing = true;
this._passes = [ this._passes = [
new THREE.RenderPass(this.scene, this.camera), new THREE.RenderPass(this.scene, this.camera),
// new THREE.SMAAPass(), new THREE.HalftonePass(),
]; ];
this.initPostprocessing(); this.initPostprocessing();
this.onResize(w, h); this.onResize(w, h);
@ -34,8 +36,8 @@ export default class Webgl {
this._controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled this._controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
this._controls.dampingFactor = 0.25; this._controls.dampingFactor = 0.25;
this._controls.screenSpacePanning = false; this._controls.screenSpacePanning = false;
this._controls.minDistance = 10; this._controls.minDistance = 3;
this._controls.maxDistance = 200; this._controls.maxDistance = 50;
this._controls.maxPolarAngle = Math.PI / 2; this._controls.maxPolarAngle = Math.PI / 2;
} }