This article explains how the ghostty-blackhole plugin visualizes Claude Code's context window as a real‑time ray‑traced black hole that expands as the session fills, and provides step‑by‑step instructions to install the shader, configure Ghostty, and integrate the Claude token script.
This article walks you through creating a visually striking hero section using Three.js, covering prerequisite knowledge, scene composition, nebula background, particle‑based star rings, custom GLSL shaders for animation, planet rendering with displacement maps, and performance‑boosting techniques like anisotropic filtering.
This article walks through the fundamentals of GLSL fragment shaders, comparing them to Canvas 2D drawing, explaining gl_FragColor, and providing step‑by‑step code examples for solid colors, linear and radial gradients, glowing rings, and diagonal line effects, all illustrated with images.
The article shows how to create a Thanos‑style particle snap animation in Flutter by capturing a widget screenshot, inserting an OverlayPortal layer, and applying a custom fragment shader that treats each pixel as a moving, fading particle, with detailed GLSL code and shader loading steps.
This article walks through reproducing the stunning Xiaomi SU7 showcase webpage by using three.js, custom GLSL shaders, and several helper libraries to implement dynamic environment map switching, reflective ground, tunnel traversal, bloom, and camera shake effects, providing complete source code and explanations.
The article introduces core 3D rendering concepts, tracing the evolution from desktop OpenGL to mobile OpenGL ES and its JavaScript counterpart WebGL, explains GLSL shader programming, reviews common model formats like OBJ and FBX, highlights front‑end engines such as Three.js, compares rasterization with ray tracing, and mentions modeling tools and emerging AI‑driven techniques.
This article presents an iOS OpenGLES 2D experiment that demonstrates a face‑slimming photo‑editing demo, explains the mesh‑grid warping algorithm, shader debugging techniques, perspective and affine transformations, and provides full source code and usage instructions.
This article explains the fundamentals of texture mapping in OpenGL ES, covering texture objects, mapping theory, texture coordinates, wrapping modes, filtering techniques, texture units, and provides practical guidance for implementing these concepts in graphics applications.
This article provides a comprehensive guide to WebGL1 shaders, explaining the roles of vertex and fragment shaders, GLSL syntax, storage qualifiers, precision, control structures, and demonstrates rendering a 3D cube with indexed drawing and reusable utility functions.
This article introduces the role of OpenGL ES in mobile video editing, explains why it is preferred over Vulkan, details the rendering pipeline and GLSL shader programming, and provides step‑by‑step Android code for implementing image transition effects and combining multiple transitions.
This tutorial explores color manipulation in WebGL fragment shaders, demonstrating how to apply RGBA values, create gradient effects using coordinate mapping and cubic Bezier curves, and implement HSB color space conversions to achieve dynamic and visually complex rendering results.
This article demonstrates how to convert Cartesian coordinates to polar coordinates in GLSL, providing reusable shader functions and examples that generate a variety of intriguing shapes such as blades, clovers, buds, flowers, gourds, apples, and infinity symbols, while encouraging experimentation with parameters.
This article explains how to construct signed distance fields for triangles, regular polygons and ellipses using GLSL shaders in WebGL, covering the mathematical definitions, interior‑exterior detection, code implementations, and techniques for repeating patterns to create complex procedural graphics.
This article explains the concept of distance fields, shows how to compute distance fields for rectangles, lines, and line segments in GLSL, and demonstrates sampling techniques and curve rendering using WebGL shaders with complete code examples.
This tutorial explores WebGL fragment shaders by demonstrating how to draw basic shapes and lines using step and smoothstep functions, while introducing anti-aliasing techniques and distance field composition methods for precise GPU-based rendering.
The article explains how to implement three common beauty‑camera image deformation effects—twirl, inflate, and pinch—using GLSL shaders, detailing the underlying deformation functions, sampling distance‑field transformations, and smoothstep‑based strength controls, and provides full shader code, animated examples, and resource links.
This article provides a comprehensive overview of WebGL, explaining its relationship to OpenGL ES, the structure of WebGL programs, shader programming (vertex and fragment shaders), storage qualifiers, a step‑by‑step colored‑triangle example, the rendering pipeline, and practical texture‑mapping techniques with code samples.
This tutorial explains how to create a visually striking, interactive 3D globe using three.js, covering texture mapping, GLSL shader programming, click interaction logic, flight‑line effects, performance considerations, and a complete example of vertex and fragment shaders with accompanying JavaScript code.
This article demonstrates how to create a universal GLSL fragment shader that produces static and delayed dynamic split‑screen effects—similar to TikTok filters—by manipulating texture coordinates, handling arbitrary screen counts, and integrating multiple textures within the iOS GPUImage framework.
In this article, Tencent engineer Chang Qing explains the biology‑inspired “Shift‑and‑Blend” video effect—separating RGB channels, scaling and translating each, then alpha‑blending them—while detailing a normalized coordinate system, the required scaling/translation operations, and a high‑performance OpenGL fragment shader implementation for real‑time video processing, with links to demo and source code.
This tutorial explains how to dynamically control WebGL vertex and fragment shaders by using attribute and uniform variables, assign values from JavaScript, manage buffer objects for large vertex datasets, and render multiple points with proper WebGL API calls.
This article explains how programmable shaders running on the GPU form the foundation of modern graphics rendering, and demonstrates step‑by‑step how to replace a large transparent PNG background, create animated particle effects, and draw complex patterns directly with GLSL in WebGL, resulting in smaller, more dynamic, and faster web pages.
This article explains how browsers can leverage GPU acceleration via WebGL and GLSL to perform general‑purpose calculations, compares CPU and GPU architectures, demonstrates step‑by‑step shader programming, data encoding into RGBA, and discusses precision limits and performance gains.
This article explains why 32‑bit floating‑point numbers cause matrix and depth‑buffer precision issues in WebGL map rendering and presents three GPU‑based solutions, a sub‑coordinate system method, and JavaScript adjustments to eliminate visual jitter and Z‑fighting.
