Babylon.js_3D_Graphics

Babylon.js is one of 3D graphic engine using a JavaScript library for HTML5. I had tried to create some 3D graphics, some games, 360 degrees video and VR mode on 360 degrees video by using Babylon.js. I hope it helps as a reference for beginners.

Description

This document describes how to create the 3D graphics, the maze game, some pazzle games, 360 degrees video and VR mode on 360 degrees video by using Babylon.js for beginners.

Demo

I will show you same samples to create 3D graphics and games, etc. on step by step.
These demonstrations are confirmed by Microsoft Edge (Ver. 11.0.17763.379), Firefox (Ver. 65.0.2/64 bit) and Google Chrome (Ver. 73.0.3683.86/64 bit) under the condition of Windows 10. However, some parts of samples are not working well at the Android devices and at the iOS devices.
index.html : Menu for Demo of 3D graphics
index_Maze : Menu for how to create a maze game
index Pazzle Game : Menu for how to create some Pazzle Games
index Cruising in the sky & 360 deg. Video : Menu for cruising in the sky & 360 deg. Video
Note: These indexes are not working well in Safari.

At the above GITHUB, the files and the folders are as follows:

• CSS: This folder is stored css file for the style of menu.
• scenes: This folder is stored 3D graphic data of babylon type, GLTF type, OBJ type and STL type. Some GLTF type of data were downloaded from Poly. Any other OBJ type and STL type of 3D graphic data were downloaded from Free 3D.
• textures: This folder is stored texture data, 2D graphic data and etc. These data were based on playground that is downloaded from Babylon.js on GITHUB.
• sound: This folder is stored sound data for the maze game.
• Babylon_101_sphere.html - Babylon_401_cameras.html: These files are created sample HTML files including JavaScript data.
• BabylonJS_maze_01.html - BabylonJS_maze_07.html: These files are created sample HTML files for how to create the Maze Game.
• BabylonJS_pazzle_01.html - BabylonJS_pazzle_22.html: These files are created sample HTML files for how to create the Pazzle Games.
• maze_01.js: Javascript file for creating the maze.
• stages_101.js - Stages_301.js: Javascript files for stages on Pazzle Games. These files are able to change or to add their stages by text editor.

Step-1: Try to create a sphere

For creating the shapes in Babylon.js, following documents will be of use as a reference to you. In the Babylon.js, it is available to create the shape of box, sphere, cylinder, cone, plane, disc polygon, torus, torus knot and ground.

• Create Set Shapes
• Create Set Shapes - Lagacy

As a first step, I will try to create some spheres with several conditions.

1-1: Try to create a simple sphere

Sample 1-1: Babylon_101_sphere.html
This is to display a simple sphere. It is needed an object, some lights and a camera to create a 3D graphic.

1-2: Try to create a simple sphere with background

Sample 1-2: Babylon_102_sphere_with_BG.html
This is to display a simple sphere with background. The background is based on texture of skybox by Babylon.js.

1-3: Try to create a colored sphere with background

Sample 1-3: Babylon_103_color_sphere.html
This is to display a colored sphere with same background. The color of sphere is changed in random at every load the HTML.

1-4: Try to create a sphere with earth texture

Sample 1-4: Babylon_104_earth.html
This is to display a sphere with texture of earth. The background is changed to the space.

1-5: Try to create an animated earth

Sample 1-5: Babylon_105_animated_earth.html
The last of Step-1 is the earth that is rotated by animation.

Step-2: Try to create some spheres with background

I had created some different faced spheres in the Step-2.

2-1: To use skybox as a background

Sample 2-1: Babylon_201_skybox.html
At the Sample 2-1, you can select the background from menu at the top of the window.

2-2: To use skybox with ground

Sample 2-2: Babylon_202_skybox+ground.html
At the Sample 2-2, you can also select the background and the face of ground.

2-3: To use DDS type of file for background

Sample 2-3: Babylon_203_dds.html
At the Sample 2-3, It is used DDS(DirectDraw Surface) files instead of skybox for background. In this time, the large size of DDS files are ommited for some reasons.

Step-3: Babylon.js Demo and try to display some 3D graphics with background

In the Babylon.js, it is available to display babylon type formatted data, GLTF type, OBJ type and STL type as a 3D graphic data. I will try to display of each formatted data.

3-1: Babylon.js Demo

Sample 3-1: Babylon_301_Sel_babylon.html
These demos are from playground of Babylon.js. The large size of demo files are also ommited.

3-2: Babylon type of files with DDS type background

Sample 3-2: Babylon_302_Sel_BG&babylon.html
This is to display the babylon type formatted 3D graphic data.

3-3: GLTF type of files with DDS type background

Sample 3-3: Babylon_303_gltf.html
This is to display the GLTF type formatted 3D graphic data. However, it is not loaded the texture data after 3 or 4 times change the GLTF 3D graphic data.

3-4: OBJ type of files with DDS type background

Sample 3-4: Babylon_304_obj.html
This is to display the OBJ type formatted 3D graphic data.

3-5: STL type of files with DDS type background

Sample 3-5: Babylon_305_stl.html
This is display the STL type formatted 3D graphic data. In this time, some textures are added to the 3D graphics.

Step-4: Camera Works

Sample 4: Babylon_401_cameras.html
In the Babylon.js, it is available sevral type of camera, please refer to Cameras on Babylon.js. You can select the camera work from menu at the top of the window.
At the FlyCamera, you can control by keys of "QWEASD" at keyboard and right mouse-button beside of normal control by mouse.

Step-5: Walking Animation

5-1: Simple Walking Animation

Sample 5-1: Babylon_501_walk.html
At the Step-5-1, I will try to create a walking animation by using the Blender that is based on the tutorial of かんたんBlender講座 and the 3D character that is downloaded from PROJECT6B. Then, I had tried to attach a shadow to the 3D character and to trace it by the camera at the animation by Babylon.js.

5-2: Game of Maze with Walking Animation

Sample 5-2: Babylon_502_maze.html
This is a game for the 3D maze. A same character at the "Sample 5-1" above is walking in the 3D maze. You can control to move of the character by vertual joystic that is appeared if you touch or mouse click the left side of display. I have created this maze based on "Coding4Fun tutorial: creating a 3D WebGL procedural QRCode maze with Babylon.js" and " ５分でできる迷路・自動生成アルゴリズム".
This sample is not working at Android devices. The working sample is shown in Step-6-7.

Step-6: How to create a maze game

6-1: Create an Environment

BabylonJS_maze_01.html
First, let's create an environment. It is almost same to Step-2-2 above, an environment is created by using skybox and ground.

6-2: Set Vertual Joysticks

BabylonJS_maze_02.html
Next is setting vertual joysticks, it is available 2 vertual joysticks as left side and right side. The left side vertual joystick is control the player (use after Step-6-6), and the right side is controlling the camera as zoom in/out or pan.

6-3: Set a Block with a texture

BabylonJS_maze_03.html
Third step is to set a block with a texture. Please refer to Babylon Document.
An important point here is a setting of light position in consideration for the position of sun at skybox.

6-4: Create a Maze

BabylonJS_maze_04.html
The creating a maze is using same javascript file at Step-5-2 above.

6-5: Set a Goal and a Player

BabylonJS_maze_05.html
At the fifth step, a goal and a player are set in the maze. However, a goal is not clear displaied, then a street light is set to the goal point at next step.

6-6: Control Player's Walk

BabylonJS_maze_06.html
In this step, it is set a street light at the goal point and added the control for player's walk, stop at the wall or edge of the ground.

6-7: Finalize a Maze Game

BabylonJS_maze_07.html
The last step, it is added menus and the handing when a player reached to the goal. The file for sound effect are downloaded from Let's Play with Free Sound Effects !.
This sample is available working in Android device unlike the sample at Step-5-2.

Step-7: How to create the Pazzle Game

The creating the environment, vertual joysticks and set a block is same from Step-6-1 to Step-6-3.
It is not working at Safari.

7-1: Create a Stage

BabylonJS_pazzle_01.html
The creating the stage is almost same to Step-5-2 above. The difference point is these stages have upper floors, boxes, lifts and enemies.

7-2: Control Player's Walk

BabylonJS_pazzle_02.html
Added to control player's walking and to set the limitation walking area. It is same to Step-6-6 above.

7-3: Lift Up the Player

BabylonJS_pazzle_03.html
Added to lift up the Player. It is available lift up only one floor.

7-4: Drop Down the Player

BabylonJS_pazzle_04.html
Added to drop down the Player. It is available drop down any number of stairs.

7-5: Moving the Box

BabylonJS_pazzle_05.html
Added to move the Box in case of Player's push. It is set the limitation of moving in some situations.

7-6: Lift Up the Box

BabylonJS_pazzle_06.html
Added to lift up the Box.

7-7: Drop Down the Box

BabylonJS_pazzle_07.html
Adde to drop down the Box. It is also available drop down any number of stairs.

7-8: Change the Player at Pushing the Box

BabylonJS_pazzle_08.html
In case of Player push the Box, the walking character of Player is changed to another version.

7-9: Moving the Enemy

BabylonJS_pazzle_09.html
Added to move the enemy. In this time, the enemy is stay their floor and only random moving.

7-10: Finalized the puzzle game

BabylonJS_pazzle_20.html
Until Step 7-9 above, the moving of each box is stepping block by block. Therefore, I will try to move smoothly for the box.
This game is not working well in iOS.

Step-8: Create Other Games

8-1: SOKOBAN Type of Game

BabylonJS_pazzle_21.html
It is very easy to change the program from above pazzle game to the SOKOBAN type of game. The changed points are to set some settle points for boxes and the algolizm for game cleared. This game is also not working well in iOS.
In this time, the sound effect files are downloaded from 「あみたろの声素材工房」.

8-2: Slipping Floor Type of Game

BabylonJS_pazzle_22.html
It is also easy to change the program from above pazzle game to the slipping floor type of game. In this time, I had changed the animations for player, textures of walls and the sequence of player's actions. This game is also not working well in iOS.

Step-9: Cruising in the sky

There are created by next steps for cruising in the sky with clouds.

9-1: Create an Environment

Create the skybox : As a first step, it is created an environment by using the skybox.

9-2: Expressing Passage of Time

Set the color grading : Next step is to set the color grading as like the dusk.
I have used to provide a color grading texture. Please refer to the demo A colorGradingTexture using a .3dl format

9-3: Clouds Shading

Added clouds : The 3rd. step is to add the clouds to the sky.
This clouds are created by based on Shader Material.

9-4: Setting some Materials

Cruising in the sky : Demo for cruising in the sky
There are added some GLTF type formatted 3D graphic data.

Step-10: 360 Degrees Video and VR(Virtual Reality) Video

10-1: 360 Degrees Video

Babylon_1001_360_Video : Sample for 360 degrees video
You can control the angle of the video by mouse. The other samples are able to see at Demo for 360 videos on Leaflet.

10-2: VR Mode on 360 Degrees Video

Babylon_1002_360_VR : Sample for VR Mode on 360 degrees video
Babylon_1003_360_VR_Changeable : Same samples for VR Mode on 360 degrees video from Storyblocks.
If you click the goggle mark at bottom right, it is changed from normal mode to VR mode. Then, you can return to normal mode by press down the "ESC" key. Also, the other sample are able to see at Demo for 360 VR on Leaflet.

Reference

• Babylon.js: Home page of Babylon.js
• Poly: 3D graphincs
• かんたんBlender講座: 高知工科大学のかんたんBlender講座
• PROJECT6B: Mr. Benjamin's Home Page (Download ruby-chan data that is a 3D character.)
• Coding4Fun tutorial: creating a 3D WebGL procedural QRCode maze with Babylon.js: A tutorial for creating the 3D maze.
• 「 ５分でできる迷路・自動生成アルゴリズム」: An algorithm to create the maze.
• 「あみたろの声素材工房」: I had downloaded the sound effect data from this URL.
• Storyblocks: Download Royalty-Free 360° and VR Videos

Licence

MIT

Author

T. Fujita