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

⚡ Fast moving clouds with transparency and shadows

Browse source
This commit is contained in:
Joshua Seigler 2018-10-12 02:13:57 -04:00
parent 9dc521e39a
commit 8721b90d84
11 changed files with 88 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/js/core/Loop.js
View file

@ -3,6 +3,7 @@ class Loop {
constructor() {
this._idRAF = -1;
this._count = 0;
this._time = (new Date()).getTime();
this._listeners = [];
@ -13,10 +14,11 @@ class Loop {
_update() {
let listener = null;
let i = this._count;
this._time = (new Date()).getTime()
while (--i >= 0) {
listener = this._listeners[i];
if (listener) {
listener.apply(this, null);
listener.apply(this, [this._time]);
}
}
this._idRAF = requestAnimationFrame(this._binds.update);

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

@ -10,30 +10,15 @@ export default class Webgl {
this.camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 1000);
this.camera.position.z = 10;
// // overwrite shadowmap code
// let shader = THREE.ShaderChunk.shadowmap_pars_fragment;
// shader = shader.replace(
// '#ifdef USE_SHADOWMAP',
// '#ifdef USE_SHADOWMAP\n' + PCSS
// );
// shader = shader.replace(
// '#if defined( SHADOWMAP_TYPE_PCF )',
// `
// return PCSS( shadowMap, shadowCoord );
// #if defined( SHADOWMAP_TYPE_PCF )`
// );
// THREE.ShaderChunk.shadowmap_pars_fragment = shader;
this._renderer = new THREE.WebGLRenderer({
antialias: true,
});
this._renderer.setPixelRatio(window.devicePixelRatio);
this._renderer.gammaInput = true;
this._renderer.gammaOutput = true;
this._renderer.shadowMap.enabled = true;
this._renderer.shadowMap.type = THREE.BasicShadowMap;
// this._renderer.shadowMap.type = THREE.BasicShadowMap;
this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.dom = this._renderer.domElement;
@ -91,9 +76,12 @@ export default class Webgl {
this.camera.aspect = w / h;
this.camera.updateProjectionMatrix();
this._renderer.setSize(w, h);
if (this.usePostprocessing) {
this._composer.setSize(w, h);
this._renderer.setSize(w, h);
this._renderer.setPixelRatio(window.devicePixelRatio / 2);
this._composer.setSize(w/2, h/2);
} else {
this._renderer.setSize(w, h);
}
}
}