XEngine

This is a 3D scene manager and simple physics simulator based on three.js.

You can use this project to build new scenes like old school "Resident Evil" type scenes.

Use WASD to move player, Shift to accelerate, S + Shift to quick turn around. Please click "start" on the left menu->Actions first to enable playing.

Have fun!!!

Here is the tutorial:

1. The assets inclueds textures and models will downloaded from website first, around 170MB, cost several seconds.

2. When all loaded, you will see a initial scene like this:

   

3. Click "start" on the left menu->Actions->start will start this scene to render, the fps will start to count. On the other hand you can click "stop" to stop the scene from rendering, it will render only when you move the camera.

   

4. If your fps is too low, try 2 things:

   1. Resize you browser to smaller scales.
   2. Change "Resolution" to lower level, because the pixel rate on Mac is 2 as default, this will render 2 times bigger than the actual browser pixel.

   

5. Change cameras, there are 3 types of camera controls:

   1. Default OrbitControls based on three.js, use mouse left to rotate camera, use mouse right to move camera.
   2. ThridPersonCamera, this will bind camera to current player position perspectively. This camera is configurable in scene, select "enable" on the left menu->Third Person Camera->TPC->enable.

   

   3. InspectorCamera, this camera simulates for "Resident Evil" type of camera. This camera is configurable in scene, select "enable" on the left menu->Inspector Camera->InsCam->enable.

   

6. Enable post-processing and change effects.

   1. Select "enable" on the left menu->Post Processing->PostEffect->enable to turn on post-processing effects.

   

7. XEngine supports 5 kinds of effects:

   1. Picker, this will allow you to pick object on the scene. When an object is picked, the right "Objects Control" will allow you to adjust its position and rotation.

   

   2. You can use "resetScene" button on the left menu->Actions->resetScene to reset all changed objects to initial status.
   3. FXAA, enable Fast Approximate Anti-aliasing.
   4. SSAA, enable Supersampling Anti-aliasing, caution: this will cost performance drop massively, use it carefully. You can also change the "SSAASampleLevel".
   5. SSAO, enable Screen Space Ambient Occlusion, caution: this will cost 20-30fps drop, use it carefully. Change "SSAOOutput" to see diffrent output effects.

   

   6. Bloom, enable bloom lighting effect, this will turn on some lights in the scene too which is configuable in scene. caution: this will cost 20-30fps drop, use it carefully. Change "BloomStrength" or "BloomRadius" to adjust effect level.

   

8. Select Control. You can change to "Lights Control" on left menu->Select Control->control->Lights Control. Then the right control panel will change to lights, which is grouped by rooms. It will allow you to adjust each light parameters and its shadow.

   

9. Use "saveScene" and "loadScene"

   1. On left menu->Actions->saveScene button, click it to pop-up a file dialog to save current scene config json file to local. caution Edge will save directly without poping up a file dialog.

   

   2. On left menu->Actions->loadScene button, click it to pop-up a file select dialog to select a scene config json file which you saved locally to load from it.

10. Change scenes, use left menu->Select World->scene to change from scenes.