--- title: "Building a Mouse-Following Square Lens Effect with Three.js and GLSL" url: https://daily.dev/posts/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl-0joazg7l2 source_url: https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl type: article source: "Codrops" published: 2026-08-25T10:16:50.528Z updated: 2026-08-25T10:17:20.484Z tags: ["webdev", "threejs", "creative-coding"] reading_time: 19 upvotes: 1 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a Mouse-Following Square Lens Effect with Three.js and GLSL **[Codrops](https://daily.dev/sources/codrops)** · 19 min read · 1 upvotes · 0 comments ## Summary A step-by-step tutorial walks through building a mouse-following square lens effect using Three.js and GLSL, combining a grayscale image with a color image revealed inside a square mask. The square applies a CC Lens-style distortion and a radial RGB shift that intensify toward its edges, while the grayscale background gets subtle wave and noise-based motion via a random3 GLSL function adapted from a Shadertoy example. The implementation covers project structure, fragment and vertex shader code, aspect-ratio correction for the square mask, mouse position mapping, and adding a lil-gui interface for real-time parameter tweaking, all without post-processing or 3D models. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you create a CC Lens-style distortion effect in a GLSL fragment shader? A CC Lens distortion is created by centering UV coordinates at the origin, computing the squared radial distance with dot(centeredPosition, centeredPosition), then scaling the position by a distortion-dependent factor: 1.0 + distortion * radius2 for positive distortion, or 1.0 / (1.0 - distortion * radius2) for negative distortion. The difference between distorted and original UVs becomes a sampling offset applied to the texture lookup. _See the full shader walkthrough on daily.dev when building similar lens distortion effects with Three.js._ ### How do you make a square mask maintain its aspect ratio when a WebGL canvas is resized? Divide the square's UV test coordinates by an aspect-ratio correction factor computed as vec2(min(meshSize.y/meshSize.x, 1.0), min(meshSize.x/meshSize.y, 1.0)). Applying this scale before running the boundary step tests keeps the square's proportions fixed regardless of viewport width or height changes. _Developers tuning responsive WebGL shapes can find this kind of shader math on daily.dev._ ### How do you create a radial RGB shift effect that increases in intensity toward the edges of an area in GLSL? Compute a direction vector from the area's center to each pixel, ranging from -1.0 to 1.0 per axis, then sample the red, green, and blue channels at offset positions equal to that direction multiplied by separate per-channel shift uniforms (e.g. 0.01 for red, -0.01 for blue). Because the direction is zero at the center, channels overlap there and separate progressively toward the edges. _Shader developers refining chromatic aberration effects can track techniques like this on daily.dev._ ## Similar posts on daily.dev - [Creating an Interactive 3D Cluster with Three.js, TSL and Three Start](https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai) · Codrops · 2 upvotes · 0 comments - [Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js](https://daily.dev/posts/building-a-dual-scene-fluid-x-ray-reveal-effect-in-three-js-ajz5uu9x7) · Codrops · 3 upvotes · 0 comments - [Building an Interactive Wave Propagation Cube Grid with Three.js](https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10) · Codrops · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl-0joazg7l2)