Category: Immersive Web( AR/ VR/ XR)

This is the category for Immersive Web( AR/ VR/ XR)

Real-Time Lighting and Shadow Optimization in Three.js

Lighting and shadows define mood, depth, and realism in 3D experiences, but they can also be performance bottlenecks—especially in WebXR and browser-based environments. Three.js provides multiple lighting techniques, ranging from baked lightmaps to real-time dynamic shadows. Balancing realism with performance is key to creating immersive yet smooth-running applications. By combining efficient shadow techniques, light probes,… Continue reading Real-Time Lighting and Shadow Optimization in Three.js

Attaching a Camera to a Character’s Head in Three.js for First-Person and Cinematic Views

In many interactive 3D applications, there’s a need for the camera to follow a specific point on a moving character — often the head. This technique allows for realistic first-person perspectives, dynamic over-the-shoulder shots, and immersive VR experiences without constantly recalculating the camera position in the render loop. A reliable way to achieve this in… Continue reading Attaching a Camera to a Character’s Head in Three.js for First-Person and Cinematic Views

VectorKeyframeTrack

A Track of vector keyframe values. Constructor VectorKeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant ) name – (required) identifier for the KeyframeTrack. times – (required) array of keyframe times. values – values for the keyframes at the times specified, a flat array of vector components. interpolation – the type of interpolation to use. See Animation Constants for possible values. Default… Continue reading VectorKeyframeTrack

Procedural World Generation and Terrain Rendering in Three.js

Description: In large-scale 3D experiences—such as virtual open worlds, learning platforms simulating geography, or nature-based games—handcrafting every detail becomes impractical. Procedural generation empowers developers to algorithmically create terrains, landscapes, and objects dynamically at runtime. By using height maps, noise functions, and GPU-accelerated techniques, Three.js can render complex, high-detail terrain with smooth performance, even in WebXR.… Continue reading Procedural World Generation and Terrain Rendering in Three.js

Blend Modes, Reflections, and UV Utilities in TSL

When working with shaders in TSL (Three.js Shader Language), controlling how colors blend, how reflections behave, and how UV coordinates are manipulated can dramatically enhance your visual output. This article provides an overview of essential functions for blending, reflection, and UV mapping in TSL. Blend Modes Blend modes are used to mix two colors in… Continue reading Blend Modes, Reflections, and UV Utilities in TSL

carto/api-client

carto/api-client JavaScript (and TypeScript) client library for CARTO APIs and framework-agnostic CARTO + deck.gl applications. Includes: Widget APIs … TBD Installation Install @carto/api-client: npm install –save @carto/api-client Documentation Fetching data Import vectorTableSource, vectorQuerySource, and other data source functions from the @carto/api-client package. These are drop-in replacements for the equivalent functions from the @deck.gl/carto package, and the same data source may be used with any number of layers… Continue reading carto/api-client

AnimationAction

AnimationActions schedule the performance of the animations which are stored in AnimationClips. Note: Most of AnimationAction’s methods can be chained. For an overview of the different elements of the three.js animation system see the “Animation System” article in the “Next Steps” section of the manual. Constructor AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D ) mixer – the AnimationMixer that is… Continue reading AnimationAction

Proximity Fading Effects in ThreeJS

Overview Subtle visual cues can dramatically improve clarity in 3D interfaces. One elegant and efficient approach is to make objects fade in and out based on how close the player or camera is to them. The applyDistanceFade utility is a minimalist function that does exactly this — fading an object’s opacity based on proximity. Let’s… Continue reading Proximity Fading Effects in ThreeJS

Billboards

A CanvasTexture to make labels / badges on characters. Sometimes we’d like to make labels or other things that always face the camera. Three.js provides the Sprite and SpriteMaterial to make this happen. function makePerson(x, labelWidth, size, name, color) { const canvas = makeLabelCanvas(labelWidth, size, name); const texture = new THREE.CanvasTexture(canvas); // because our canvas is likely not a power of… Continue reading Billboards