Recommendation: Use NSDT Designer to quickly build programmable 3D scenes
In order to generate a BabylonJS scene, code needs to be written in Javascript, which is processed by the BabylonJS engine and the result is displayed on the screen. Scenes can be changed by changing meshes, lights or camera positions. To show possible changes in time, the screen display (frame) is redrawn at 60 frames per second.
Simplified, the process is
- Scene code is processed in CPU by BJS engine code to generate virtual 3D model
- The virtual 3D model is processed by the BJS engine code in the CPU to generate Shader GPU code
- Shader GPU code is processed by the GPU to generate screen images.
For example the BabylonJS engine takes this code:
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
and convert it to vertex data, including position, color and normal
The BabylonJS engine creates shader code for this data and passes it to the GPU.
Not just this and the scene code, you can also write your own user shader code, which becomes
Scene code is processed in CPU by BJS engine code to generate virtual 3D model
- Virtual 3D model and user shader code are processed in CPU by BJS engine code, generating shader GPU code
- Shader GPU code is processed by the GPU to generate screen images.
1. Types of shaders
Shaders are written in the Graphics Library Shader Language (GLSL) and are divided into two parts.
- Vertex Shader - It takes the data for each vertex and determines where its pixel appears on the screen and its color.
- Fragment Shader - Uses data from the vertex shader to determine the position and color of the pixels representing each face of the mesh.
Fragment shaders are sometimes called pixel shaders.
2. Transfer variables
Vertex data for position, normal, and uv coordinates are passed to the vertex shader as variables of the class attribute. User data can be passed to vertex and fragment shaders as variables of the uniform class. Data can be passed from a vertex shader to a fragment shader, where the variable classes are different.
An important uniform variable declared in the vertex shader is worldViewProjection, because the BabylonJS engine uses it to pass the scene 3D-2D projection data to the vertex shader.
3. Variable type
All variables used in both shaders must specify a type, and any number assigned to that variable must be consistent with its type.
For example
int n = 2;
float r = 2.0;
The following example throws an error
float r = 2;
Some examples of types are as follows:
- vec2 ------ two-dimensional vector of floating point numbers
- vec3 ------ three-dimensional vector of floating point numbers
- mat4 ------ 4 columns and 4 rows of floating-point matrix
- Sampler2D - 2D texture image
Since vertex positions need to be as accurate as possible, all floats should be set to have high precision. This is used at the beginning of each shader's code -
precision highp float
The GLSL language has many built-in variables. Two that are crucial and always necessary for the operation of both shaders are:
- gl_Position provides position data in screen coordinates
- gl_FragColor provides color data for on-screen facet representation
4. Function
Functions need to be typed like their arguments and have the form
float NAME(typed parameters) {
*code*
}
5. Run the shader code
Both the vertex shader and the fragment shader are run from a function that must be called main and of type void because it returns no results. It must also type an empty argument list as void.
void main(void) {
*code*
}
6. Put the shader code into BabylonJS
Here are four ways to put shader code into a scene:
- Use BabylonJS Create Your Own Shader (CYOS) and download the zip file
- Write vertex and fragment shader code to
Original link: Introduction to Babylon.js shader—BimAnt