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

⚡ Dither clouds

Browse source
This commit is contained in:
Joshua Seigler 2018-10-12 14:03:43 -04:00
parent 8721b90d84
commit 0b5065bc97
7 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/textures/clouds-dithered.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
app/assets/textures/clouds.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

17
app/js/components/Clouds.js
View file

@ -11,6 +11,11 @@ class Clouds extends THREE.Object3D {
this.cloudTexture.wrapS = this.cloudTexture.wrapT = THREE.RepeatWrapping; this.cloudTexture.wrapS = this.cloudTexture.wrapT = THREE.RepeatWrapping;
this.cloudTexture.repeat.set(3, 3); this.cloudTexture.repeat.set(3, 3);
this.cloudShadow = loader.load('textures/clouds-dithered.png');
this.cloudShadow.wrapS = this.cloudShadow.wrapT = THREE.RepeatWrapping;
this.cloudShadow.magFilter = THREE.NearestFilter;
this.cloudShadow.repeat.set(3, 3);
this.material = new THREE.MeshBasicMaterial({ this.material = new THREE.MeshBasicMaterial({
map: this.cloudTexture, map: this.cloudTexture,
transparent: true, transparent: true,
@ -21,12 +26,12 @@ class Clouds extends THREE.Object3D {
mesh.customDepthMaterial = new THREE.MeshDepthMaterial({ mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking, depthPacking: THREE.RGBADepthPacking,
map: this.cloudTexture, map: this.cloudShadow,
alphaTest: 0.3 alphaTest: 0.25
}); });
mesh.rotation.x = -Math.PI/2; mesh.rotation.x = -Math.PI/2;
mesh.position.y = 10; mesh.position.y = 15;
mesh.castShadow = true; mesh.castShadow = true;
this.add(mesh); this.add(mesh);
@ -35,8 +40,10 @@ class Clouds extends THREE.Object3D {
} }
onUpdate(time) { onUpdate(time) {
this.cloudTexture.offset.x = (time / 1000) % 200; this.cloudTexture.offset.x = (props.cloudSpeed / 1000 * time) % 200;
this.cloudTexture.offset.y = (time / 5000) % 400; this.cloudTexture.offset.y = (props.cloudSpeed / 5000 * time) % 400;
this.cloudShadow.offset.x = (props.cloudSpeed / 1000 * time) % 200;
this.cloudShadow.offset.y = (props.cloudSpeed / 5000 * time) % 400;
} }
} }

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

@ -10,8 +10,8 @@ class Lighting extends THREE.Object3D {
dirLight.position.multiplyScalar( 20 ); dirLight.position.multiplyScalar( 20 );
dirLight.castShadow = true; dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024; dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 1024; dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.radius = 2; dirLight.shadow.radius = 2;
let d = 100; let d = 100;

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

@ -46,8 +46,6 @@ export default class Webgl {
initPostprocessing() { initPostprocessing() {
if (!this.usePostprocessing) return; if (!this.usePostprocessing) return;
this._composer = new THREE.EffectComposer(this._renderer); this._composer = new THREE.EffectComposer(this._renderer);
let ssaoShader = THREE.SSAOShader;
ssaoShader.uniforms.onlyAO = true;
this._passes.forEach((effect, i) => { this._passes.forEach((effect, i) => {
if (i == this._passes.length - 1) { if (i == this._passes.length - 1) {
effect.renderToScreen = true; effect.renderToScreen = true;

2
app/js/core/props.js
View file

@ -1,5 +1,5 @@
const props = { const props = {
rotation: 0.01, cloudSpeed: 0.5,
}; };
module.exports = props; module.exports = props;

2
app/main.js
View file

@ -16,7 +16,7 @@ loop.add(webgl.onUpdate);
// ## // ##
// GUI // GUI
const gui = new dat.GUI(); const gui = new dat.GUI();
gui.add(props, 'rotation', 0.01, 1); gui.add(props, 'cloudSpeed', -1, 1);
gui.close(); gui.close();
webgl.add(new Ground()); webgl.add(new Ground());