Basic wobble Theory The process is similar to what we did in the Raging Sea Shading lessons. We calculate an elevation according to the vertex position and we move that vertex. For the Raging Sea, we could make the vertices go up and down using the y-axis. But in this case, it’s not that simple. We want to make… Continue reading Basic wobble
Category: Immersive Web( AR/ VR/ XR)
This is the category for Immersive Web( AR/ VR/ XR)
Baking
Baking When you do a render in a 3D software like Blender, it usually looks better than the model you import into Three.js, no matter how hard you try to get the exact same lighting and colors. This is because of the technique used while making the render. Ray Tracing consists of casting multiple rays… Continue reading Baking
Displacement pass
Displacement pass Create a new shader named DisplacementShader, then a new pass named displacementPass from the ShaderPass and add it to effectComposer: const DisplacementShader = { uniforms: { tDiffuse: { value: null } }, vertexShader: ` varying vec2 vUv; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); vUv = uv; } `, fragmentShader: ` uniform sampler2D tDiffuse; varying… Continue reading Displacement pass
Fixing the antialias
Fixing the antialias There’s another feature that seems to stop working.if you are using a screen with a pixel ratio above 1, you probably can’t see the problem. Be careful; if you only have the renderPass available, you won’t see the problem because the render is done in the canvas with antialias support. Enable at least one pass… Continue reading Fixing the antialias
HalfEdge
The basis for a half-edge data structure, also known as doubly connected edge list (DCEL). Import HalfEdge is an add-on, and must be imported explicitly. See Installation / Addons. import { HalfEdge } from ‘three/addons/math/ConvexHull.js’; Constructor HalfEdge( vertex : VertexNode, face : Face ) vertex – VertexNode A reference to its destination vertex. face – Face A reference to its face. Creates a new instance… Continue reading HalfEdge
ConvexHull
A convex hull class. Implements the Quickhull algorithm by: Dirk Gregorius. March 2014, Game Developers Conference: Implementing QuickHull. Import ConvexHull is an add-on, and must be imported explicitly. See Installation / Addons. import { ConvexHull } from ‘three/addons/math/ConvexHull.js’; Constructor ConvexHull() Creates a new instance of ConvexHull. Properties .assigned : VertexList This vertex list holds all vertices that are assigned to a… Continue reading ConvexHull
VertexNode
A vertex as a double linked list node. Import VertexNode is an add-on, and must be imported explicitly. See Installation / Addons. import { VertexNode } from ‘three/addons/math/ConvexHull.js’; Constructor VertexNode( point : Vector3 ) point – Vector3 A point (x, y, z) in 3D space. Creates a new instance of VertexNode. Properties .point : Vector3 A point (x, y, z) in 3D space.… Continue reading VertexNode
VertexList
A doubly linked list of vertices. Import VertexList is an add-on, and must be imported explicitly. See Installation / Addons. import { VertexList } from ‘three/addons/math/ConvexHull.js’; Constructor VertexList() Creates a new instance of VertexList. Properties .head : VertexNode Reference to the first vertex of the linked list. Default is null. .tail : VertexNode Reference to the last vertex of the… Continue reading VertexList
Shadow Mapping
Shadow Mapping is a technique for rendering shadows by projecting the scene onto a shadow map from the perspective of the light source. Three.js supports shadow mapping for directional, spot, and point lights. Use Case: Shadow mapping is vital for adding depth and realism to scenes by simulating light occlusion. Advantages: Enhances depth perception and… Continue reading Shadow Mapping
Post-Processing Effects
Post-Processing Effects are image-based techniques applied after the main rendering pass to enhance the visual output. Common effects in Three.js include bloom, depth of field, motion blur, and vignette. Use Case: Post-processing is essential for adding cinematic flair or guiding the viewer’s focus in applications like movies, games, and interactive experiences. Advantages: Improves the mood… Continue reading Post-Processing Effects