Recent posts

[WebGL] Shader Program

GLSL (OpenGL Shading Language) is a programming language for simple program, Shader, that describes the color attribute of each vertex in parallel computation. Thus, all vertices do not know the status of other vertices nearby, i.e., vertices are blind to the others. But, if we use a uniform v...

[Three.js] Shader Material

A shader material is rendered with a custom shader. It requires vertex and fragment shaders which are written in GLSL (openGL Shading Language) code and depict the position of a vertex and its color, respectively. Since these codes run on the GPU using WebGL, a ShaderMaterial is rendered prope...

[Three.js] PBR (Physical-based rendering) Material

Three.js provides the material attribute for a 3D object, which determines how the object reflects light and how the object is rendered in a camera. The properties of material are composed of base color, metalness, roughness, and so on. Moreover, we can decorate the surface of a 3D object by u...

[Three.js] Scene Graph

Sun-Earth system In this article, I’ll create a simple Sun-Earth system. Firstly, create an orange sphere and a blue sphere which represent the Sun and the Earth, respectively.

[Three.js] How to Create a Scene

Create the scene environment For Three.js to render a scene, it needs scene, camera, and renderer. In JavaScript, you have to import Three.js depending on the installation options as mentioned in the previous article.