Inspiration

PROBLEM: My computer is bad at running web GL games.

SOLUTION: Pre-render backgrounds like the old Resident evil games.

IDEA: Use the game engine to make a faux pre-render background at run time. If I can make the engine take its time to render one really nice frame (more detailed, higher resolution) then save it as a background Image.  Then run the characters on top of the background.

EXECUTION:

All render objects in the game are on one of two layers, background and object. There are multiple cameras in the scene one renders the object layer, the rest  are used for rendering the background layer.  Each background layer camera also has a trigger point for that camera angle. Lighting is on the background layer.

When the scene is created all the background cameras renders their angle and the images are stored as variables.  The angle that has the player's position is rendered then the object layer is drawn. When the player moves to a different  angle trigger the object layer camera's transform properties is changed to that background angle camera's transform. This keeps the views consistent.

Rendering the character behind background objects was tricks. I tried to get the depth data using shaders and comparing the depth per pixel between the cameras but could not get it to work. I ended up using clone, shade-less meshes with a Croma key color,  on the object layer and use a Chroma shader to give a green screen effect. 

RESULT:  I am getting 27-30 FPS on WEB build.  

PROBLEMS:

• Sprites in front of the Croma key objects reveal the trickery, The Croma color bleeds through.
• Even with ensuring the camera angles are consistent there is still some perspective errors where the character looks larger or  smaller than the surrounding objects.
• Had to fake some collision boxes because of the perspective point. Moved the collisions for the walls forward. Made some interaction boxes larger or shifted to the side.
• Long load times between scenes. Maybe I can bake the lighting and/or preload the commonly used assets and keep them there.