brett19 / rosebrowser

ROSEBrowser is a free and open-source implementation of the ROSE Online 3D MMORPG for web browsers written from scratch using the latest web standards (WebGL, HTML5, Javascript, Threads, ...).
Other
20 stars 15 forks source link

Shadowmap for animated items/characters/mobs. #24

Open Jiwan opened 10 years ago

Jiwan commented 10 years ago

It would be nice to add shadowmaps for the all the animated entities.

I saw that three.js can simplify the process by handling the shadowmaps/lights natively. The Object3D class contains a field "castShadow" that activate the shadowmap handling for one entity or not. We can, therefore, use the statically generated shadows for all the remaining objects and keep this great optimization. I am not sure how it would work with the custom shaders though.

Otherwise, we could simply do the shadowmap rendering pass ourselves, if you think about any good optimization compared to the three.js process.

Do you have any other suggestions for shadows? Faking all of them with some fixed patterns?

brett19 commented 10 years ago

Unfortunately we will probably need to do at least part of this ourselves. The problem being that even if THREE is handling the shadowmaps, we will need to set up a way to properly blend the shadowmap that was rendered with the static shadowmaps that are loaded.

Jiwan commented 10 years ago

According to the documentation, the easiest way would be the following: 1) Create a texture that will contain the shadow map var shadowMapTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat });

2) Bind this texture as a uniform for terrain shaders. uniforms: {dynamicShadowMapTexture: {type: "t", value: 0, texture: shadowMapTexture}}

3) Create a scene that only contains the animatable objects. We must retrieve this list from the current state.

4) Create a camera on the same position as the "main light".

5) Override the material off all the objects with a MeshDepthMaterial. shadowMapScene.overrideMaterial = new THREE.MeshDepthMaterial();

6) Render the scene into the texture with a first pass. renderer.render(shadowMapScene, lightPosition, shadowMapTexture, true);

7) Use this shadowmap texture in the shaders for the second pass.