Lighting and shadows play a crucial role in enhancing realism and immersion in WebXR applications. Three.js offers various lighting methods, but achieving high-quality visuals while maintaining performance requires optimization techniques. Key Techniques for Shadows and Lighting in Three.js Shadow Mapping in Three.js Three.js provides shadow mapping techniques, including: BasicShadowMap – Fast but lacks soft shadows.… Continue reading Advanced Shadows and Lighting Techniques in Three.js
Category: Immersive Web( AR/ VR/ XR)
This is the category for Immersive Web( AR/ VR/ XR)
Color management in three.js
Definitions Linear-sRGB / THREE.LinearEncoding: Linear transfer functions, Rec. 709 primaries, D65 white point. sRGB / THREE.sRGBEncoding: sRGB transfer functions, Rec. 709 primaries, D65 white point. Best practices Textures with color data (.map, .emissiveMap, …) should be configured with .encoding = sRGBEncoding. Non-color textures use LinearEncoding. Exceptions exist for some formats (like OpenEXR), which typically use LinearEncoding for color data. Vertex colors should… Continue reading Color management in three.js
Earcut
An implementation of the earcut polygon triangulation algorithm. The code is a port of mapbox/earcut. Methods .triangulate ( data, holeIndices, dim ) : Array data — A flat array of vertex coordinates. holeIndices — An array of hole indices if any. dim — The number of coordinates per vertex in the input array. Triangulates the given shape definition… Continue reading Earcut
PolarGridHelper
The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const sectors = 16; const rings = 8; const divisions = 64; const helper = new THREE.PolarGridHelper( radius, sectors, rings, divisions ); scene.add( helper ); Constructor PolarGridHelper( radius : Number, sectors : Number, rings : Number, divisions… Continue reading PolarGridHelper
EXRExporter
An exporter for EXR. EXR ( Extended Dynamic Range) is an open format specification for professional-grade image storage format of the motion picture industry. The purpose of format is to accurately and efficiently represent high-dynamic-range scene-linear image data and associated metadata. The library is widely used in host application software where accuracy is critical, such as photorealistic rendering, texture… Continue reading EXRExporter
GLTFExporter
An exporter for glTF 2.0. glTF (GL Transmission Format) is an open format specification for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf) or binary (.glb) format. External files store textures (.jpg, .png) and additional binary data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials, textures, skins, skeletons,… Continue reading GLTFExporter
OBJExporter
An exporter for the OBJ file format. OBJExporter is not able to export material data into MTL files so only geometry data are supported. Import OBJExporter is an add-on, and must be imported explicitly. See Installation / Addons. import { OBJExporter } from ‘three/addons/exporters/OBJExporter.js’; Code Example // Instantiate an exporter const exporter = new OBJExporter(); // Parse the… Continue reading OBJExporter
PLYExporter
An exporter for PLY. PLY (Polygon or Stanford Triangle Format) is a file format for efficient delivery and loading of simple, static 3D content in a dense format. Both binary and ascii formats are supported. PLY can store vertex positions, colors, normals and uv coordinates. No textures or texture references are saved. Import PLYExporter is an add-on,… Continue reading PLYExporter
Creating a Procedural Grid Using UVs in a Shader (GLSL)
Creating a Procedural Grid Using UVs in a Shader (GLSL) Procedural textures are a powerful way to create patterns without relying on image textures. In this article, we’ll explore how to generate a grid pattern using UV coordinates in a GLSL shader. Understanding UV Mapping for a Grid In a typical shader, UV coordinates range… Continue reading Creating a Procedural Grid Using UVs in a Shader (GLSL)
Creating a Circular Mask Using UVs in a Shader (GLSL)
Creating a Circular Mask Using UVs in a Shader (GLSL) In GLSL, you can use UV coordinates to create a circular mask. This technique is useful for procedural textures, vignette effects, and stylized visuals. Understanding UV Coordinates UV coordinates range from (0,0) in the bottom-left to (1,1) in the top-right. To create a circle, we… Continue reading Creating a Circular Mask Using UVs in a Shader (GLSL)