Author: Keerthana Sachithanandham

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)

Creating a Rectangle Using UVs in a Shader (GLSL) In GLSL, you can create a rectangle purely using UV coordinates in a fragment shader. This is useful for procedural texture generation, stylized effects, and more. Understanding UV Coordinates UV coordinates in GLSL range from (0,0) in the bottom-left to (1,1) in the top-right. Using these… Continue reading Creating a Rectangle Using UVs in a Shader (GLSL)

Introduction Raymarching is an advanced rendering technique used to create procedural surfaces, fractals, and volumetric effects. Unlike traditional ray tracing, which calculates ray intersections with polygons, raymarching steps through space using a mathematical function known as a Signed Distance Field (SDF) to determine the closest surface. This article explains how to implement raymarching in Three.js… Continue reading Raymarching in Three.js Using Signed Distance Fields (SDFs)

Ray marching is a technique that simulates 3D objects inside a shader by checking distances to surfaces instead of using polygons. It’s often used for volumetric rendering, fog, and signed distance fields (SDFs). Simple Ray Marching Example This GLSL code renders a 3D sphere inside a shader: float sphereSDF(vec3 p) { return length(p) – 1.0;… Continue reading Creative Shader Effects: Exploring Ray Marching

Shaders are essential for creating visual effects in TouchDesigner, games, and real-time graphics. However, inefficient shaders can slow down performance. This article will cover simple ways to make GLSL shaders faster and smoother. 1. Reduce Expensive Calculations Some math functions are slow. Instead of using pow(), sin(), or exp(), try using simpler alternatives. ✅ Faster… Continue reading Optimizing GLSL Shaders for Real-Time Performance

Introduction Creating realistic car physics in a 3D environment requires a combination of movement mechanics and a physics engine. In Three.js, we use Cannon.js to simulate forces, collisions, and realistic motion, making the car behave as it would in real life. This article explores how physics is applied to car controls using rigid bodies, forces,… Continue reading Understanding Physics in Car Controls Using Three.js and Cannon.js

Introduction In modern web applications, creating interactive 3D experiences is becoming increasingly popular. One exciting feature is adding realistic car controls in a 3D scene. Using Three.js, we can simulate driving mechanics with smooth movement and physics-based interactions. Setting Up the Scene To begin, a Three.js scene needs to be initialized with a camera, lights,… Continue reading Implementing Car Controls in Three.js

Introduction: Theater.js animations can be combined with physics engines like Cannon.js to create more realistic animations with control over scripted sequences. Implementation: To animate an object falling with physics while maintaining script control: const body = new CANNON.Body({ mass: 1, shape: new CANNON.Sphere(1) }); world.addBody(body); theater.addActor(“ball”, { position: { y: 10 } }); theater.getActor(“ball”).play({ position:… Continue reading Integrating Physics-based Animations with Theater.js and Three.js

Introduction: Animating 3D characters with Theater.js provides a flexible way to create realistic motion. When combined with speech synthesis, it can also be used for lip-syncing animations. Implementation: By animating a character’s mouth position based on speech audio, we can create a talking avatar: theater.addActor(“character”, { mouthOpen: 0 }); function speak(text) { const utterance =… Continue reading Character Animation and Lip Syncing in Three.js using Theater.js

Introduction: Theater.js provides precise control over animations, making it ideal for crafting cinematic camera movements in Three.js scenes. This can be used for storytelling, guided tours, or game-like experiences. Implementation: A smooth camera transition can be achieved by animating camera position and rotation with Theater.js: const theater = theaterJS(); theater.addActor(“camera”, { position: { x: 0,… Continue reading Creating Cinematic Camera Movements in Three.js with Theater.js