This article surveys five notable open‑source 3D globe projects—echarts‑gl, Gio.js, three‑globe, Oclock, and starlink‑viz—detailing their core capabilities, technical stacks, usage examples, and ideal scenarios for data‑driven geographic visualizations.
Kimi K2.6, the new AI model, can create a complete application—including video hero sections, advanced WebGL shader animations, and a functional backend—from a single prompt, while supporting 12‑hour continuous execution, 4000+ tool calls, and cross‑language workflows.
Spark 2.0 is an open‑source WebGL2‑based rendering engine that uses continuous LoD trees, a custom RAD file format, and GPU memory virtualization to stream and display massive 3D Gaussian‑splatting scenes on phones, tablets and browsers with smooth, real‑time interaction.
This article examines Neon Vibe Motion, an open‑source platform that lets users describe motion effects in natural language, uses LLMs to generate executable Canvas/WebGL code with adjustable parameters, and details the architecture, workflow, prompt engineering, and export options that enable real‑time, controllable motion graphics.
The article examines common AI coding failures with Three.js—outdated APIs, math miscalculations, and shader glitches—and introduces the open‑source threejs‑skills repository, which supplies AI agents with best‑practice, performance‑tuned knowledge to dramatically improve 3D development outcomes.
The article introduces the open‑source threejs‑skills repository, explains why AI‑generated Three.js code often fails due to API changes, math errors, and shader issues, and shows how the skill set equips AI agents with up‑to‑date best practices, performance tips, and ready‑made loaders, dramatically improving 3D development workflows.
This article introduces the ez‑Tree plugin for Three.js, showing how to install it via npm or pnpm, import and instantiate the Tree class, configure position, scale, and animation updates, and customize parameters such as tree type, branch direction, and leaf density, with a link to the GitHub repository.
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 explains how to integrate Galacean Effects into a Taro 3.x mini‑program to create ritualistic card‑merge animations, covers installation, code examples, loading‑time analysis, and offline‑package optimization that dramatically reduces first‑frame delay and improves user experience.
This article explores various techniques—from CSS animation to WebGL shaders—for rendering rain in a browser, analyzes the underlying algorithms, provides GLSL and Three.js code examples, and discusses performance optimizations and extensions such as snow effects.
After a two‑month hiatus, the author details the creation of CubeCity—a 17×17 grid city‑building game built with Three.js, Vue, and Pinia—covering metadata design, rendering pipeline, interaction modes, code architecture, and reflections on using Three.js for game development.
This guide walks you through using three.js to create a 3D scene, set up cameras, add objects and lights, render with WebGL, enable orbit controls, animate with requestAnimationFrame or GSAP, handle resizing, toggle fullscreen, and integrate dat.gui for interactive UI.
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.
This tutorial walks you through creating a lightweight, child‑friendly 3D Crossy Road‑style game using Three.js, covering scene setup, metadata‑driven terrain generation, asset loading, player movement queues, dynamic collision detection, UI communication, and deployment tips, all illustrated with code snippets and screenshots.
This article guides readers through building a highly customized 3D scene using Three.js, GLSL shaders, AI‑generated 2D/3D assets, orthographic cameras, pixelated post‑processing, four‑direction character movement, octree collision detection, and stylized water effects, while providing code snippets and resource links.
This tutorial walks through building an advanced hero section using Three.js, covering prerequisites, loading and animating a robot model, configuring lighting, creating particle effects, adding UI elements, applying a radial gradient background, implementing parallax interaction, and rendering flowing lines for a polished WebGL experience.
This article walks through recreating Genshin Impact’s Moon scene using Three.js, covering asset extraction, background loading, star field generation with custom shaders, concentric ring creation, axis stars, camera grouping, and performance optimizations, complete with full source code and live demo links.
This article explains three.js shadow‑mapping mechanisms, compares shadow types, and provides concrete code‑level optimizations for global and ground shadows that improve visual quality while keeping performance suitable for mobile web applications.
This article walks through building an eye‑catching Hero Section using Three.js, custom GLSL shaders, dynamic point lights, and post‑processing effects such as UnrealBloomPass, FilmPass, and a custom ShaderPass, providing complete code snippets and practical tips for front‑end developers.
This article explains how Galacean Effects, an online animation solution for mobile, delivers immersive, high‑performance festive animations to billions of users by combining WYSIWYG design, multi‑composition playback, programmable APIs, and tiered rendering optimizations.
This comprehensive tutorial demonstrates how to build sophisticated 3D visualizations with Three.js, covering file organization, grid helpers, custom line creation, GUI parameter controls, warning tags, animated bezier connections, a particle-based tornado simulation, and realistic bloom lighting effects, all with detailed TypeScript code examples.
This article explores the design and implementation of the Crab rendering engine, a WebGL‑based solution that combines high expressiveness, interactivity, and cross‑device compatibility to deliver game‑like animations for large‑scale activities, detailing its architecture, rendering pipeline, practical applications, and performance optimizations.
This article demonstrates how to combine AI algorithms, specifically Simplex Noise, with Three.js to create a dynamic 3D firefly animation, covering project setup, particle system creation, bloom post‑processing, AI‑driven motion, scene optimization, and provides complete runnable code.
This tutorial explains how to convert TTF/WOFF font files into Three.js‑compatible JSON using a ttf_to_json tool, load the resulting font with FontLoader, generate shapes (including holes), center the geometry, adjust the camera, and add dynamic text input for interactive 3D rendering.
This tutorial demonstrates how to combine Gaode (AMap) 3D maps with Three.js to render interactive effects such as flying lines, animated boundaries, rising peaks, floating pyramids, and custom text markers, using custom coordinate conversion, WebGL layers, shaders, and CSS2D rendering for a compelling web‑based geographic visualization.
This article traces WebGL's rise and decline, explains WebGPU's origins, compares their capabilities, provides hands‑on code examples, and shows how WebGPU's compute‑first design unlocks high‑performance Web AI applications.
This article demonstrates how to build a Three.js‑based wind turbine IoT visualization system, covering the tech stack, shader creation, clipping and tween animations, material handling, custom Bézier curves, gear animations, and bloom lighting effects, with full source code examples.
This tutorial demonstrates how to build a 3D city model in Three.js by adding ambient and directional lighting with shadows, generating random building geometries, customizing shaders for top‑view UV mapping, and implementing animated radar diffusion and scanning effects through shader uniform updates.
This article details the design and optimization of Kola2d, a custom WebGL rendering engine for Docs online spreadsheets, explaining why WebGL was chosen, how the system separates business and rendering layers, and the many performance tricks that enable smooth 50+ FPS rendering of tables with up to a million cells.
By compressing GLB files into ZIP, extending Three.js loaders to unzip via a Rust‑compiled WASM tool, encrypting small buffers, and caching morph‑target shaders while spreading mesh rendering across frames, the team shrank model size from 50 MB to 11 MB and cut first‑frame render time from 7 seconds to 0.6 seconds, reducing overall page load from 15 seconds to 5 seconds.
This article demonstrates how to create a simple car model in three.js, grouping its components, implementing a following camera, adding keyboard controls for movement and steering, animating wheel rotation, and building an interactive parking feature with raycasting for selection.
This tutorial demonstrates how to create a realistic rain effect in three.js by generating depth maps with an orthographic camera, rendering them to a texture, and using custom shaders to position and fade raindrop meshes based on depth information.
This tutorial walks readers through building a realistic, animated ocean scene in three.js, covering project initialization, geometry creation, custom shaders, wave calculations, and dynamic boat positioning and rotation using JavaScript and WebGL techniques.
This article explores the integration of WebAssembly and WebGL to build a high-performance frontend rendering engine, detailing architectural design, benchmark results, Lottie animation optimization, and a novel frame-difference sprite sheet technique that significantly reduces resource size while enhancing interactive capabilities.
This tutorial walks through reproducing the Pepyaka shader effect using Three.js, covering the creation of a central sphere, vertex displacement with GLSL noise, color mapping, spherical particle systems, background firefly particles, animated text, and optional top‑light effects, all with complete source code.
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.
This article presents a step‑by‑step guide for building an interactive 3D city data visualization using Vite, TypeScript, and Three.js, covering model loading, scene centering, fly‑line generation, line‑drawing, CSS2D overlays, camera presets, and custom shaders with complete code examples.
This tutorial demonstrates how to use Three.js, TypeScript and Vite to load an SVG logo, extract its Bézier curve points, generate evenly spaced laser paths, animate multiple lasers with Line2, and finally separate the logo from a floor using shape holes, providing complete source code and visual results.
To deliver high‑quality mobile digital‑human graphics without inflating B‑Station’s app size, we replaced heavyweight engines with a lightweight Three.js‑based WebGL pipeline, refined the PBR shader (Cook‑Torrance, Smith, visibility term) and added skin, eye, anti‑aliasing and translucency tricks, cutting package growth to under 1 MB and boosting frame rates by up to 62 % on typical smartphones.
Gaode solved the WebGL‑context limit in AMap by rendering all visual layers on a single canvas with a shared context, disabling autoClear, preserving depth ordering, and using per‑layer EffectComposers merged via a final composer, enabling multiple scenes and post‑processing without exceeding browser limits.
This article explains how to recreate a complex particle animation using three.js by leveraging GPGPU techniques, custom shaders, and compute shaders to efficiently simulate and render hundreds of thousands of particles in real time.
This article explains how to create a pure‑frontend “quantum entanglement” effect by synchronizing multiple browser windows using three.js, detailing the index.html setup, the main.js logic for scene and window management, and the WindowManager class that tracks window shapes via localStorage.
This tutorial walks through building an interactive 3D turbine scene using Vite, TypeScript, and Three.js, covering model loading, lighting, orthographic camera setup, trackball controls, edge‑line generation, bloom post‑processing, GUI tweaking, and animated turbine rotation, with full source links.
This article explains why the official web map built with Leaflet suffers from poor performance, how using CanvasKit (Skia compiled to WebAssembly) together with @use-gesture and popmotion dramatically improves rendering speed and interaction smoothness, and provides a complete implementation and component wrappers for Vue and React.
This article walks through how to replicate Genshin Impact's login interface using three.js, custom GLSL shaders, instanced meshes, and post‑processing effects, providing detailed code snippets and explanations for background gradients, cloud layers, pillars, light beams, stars, fog, and rendering optimizations.
This tutorial explains how to create an interactive Mid‑Autumn Festival dice‑game using Three.js for 3D rendering, cannon‑es for physics simulation, glTF/glb model loading, heightfield collision handling, and JavaScript logic to determine game results.
This article explains how to create a realistic, map‑based rain effect with Three.js by designing a 3D particle system, writing custom vertex and fragment shaders, integrating the layer into a map scene, and extending it to support wind and snow effects.
This article explains why enhancing bloom (glow) effects is important for visual attention and scene aesthetics, outlines a generic WebGL implementation pipeline, discusses factors influencing bloom quality, and presents the Crystal WebGL engine's optimizations and performance comparisons between traditional and mipmap‑based approaches.
This tutorial walks through building a simple Naruto-inspired 3D scene using three.js, covering model acquisition, character creation, keyboard controls, rotation handling, animation state management, camera integration, octree-based collision detection, and troubleshooting common issues such as camera‑character alignment and jump physics.
This article introduces the fundamentals of Three.js, demonstrates how to encapsulate its core APIs into a Viewer class, and walks through building a Vue3-based 3D visualization project with scene, camera, lighting, model loading, skybox, mouse interaction, and helper utilities.
This tutorial walks through the fundamentals of Three.js—setting up a scene, camera, lights, and meshes—to build a rotating cylindrical tunnel with animated textures and color changes, culminating in a complete time‑machine visual that runs in a web browser.
This article reviews the adoption of WebAssembly for a web‑based video editing SDK, covering its technical background, browser compatibility, JavaScript vs. WebAssembly trade‑offs, multithreading with Web Workers, OpenGL/WebGL rendering, virtual file‑system handling, package‑size reduction techniques, development tooling, and future directions such as front‑end synthesis and collaborative editing.
This article explains what WebGL is, surveys popular 2D and 3D JavaScript frameworks, analyzes large‑scene performance bottlenecks, and presents concrete optimization techniques such as custom GeoJSON compression, fragment reduction, draw‑call batching, mesh merging, LOD, face culling, and Web Workers, concluding with a brief overview of the emerging WebGPU API.
The article walks through building an automatic cruise navigation effect on AMap with Three.js by acquiring route data, merging GeoJSON paths, loading a 3D vehicle model, animating its movement and camera follow using TWEEN, and blending the NPC layer with satellite and 3DTiles layers for a smooth autonomous navigation experience.
This tutorial shows how to build a simple 2D platformer using the Alice.js H5 engine combined with React, covering scene construction with JSX components, camera scrolling, UI layering, PixiJS element types, animation formats, flex layout, keyframe hooks, event scripting, and debugging tools.
The article shows how the vivo front‑end team built a lightweight, mobile‑friendly 3D exhibition hall for the Game Festival by modeling in Blender, exporting GLB files, and using Three.js to set up the scene, lighting, shadows, joystick navigation, collision detection, and performance optimizations such as texture baking and model compression.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
This article details a step‑by‑step case study of creating a web‑based 3D shopping scene, covering framework selection, rendering layer architecture, collision handling, asset pipelines, performance optimizations, and future iteration plans for lazy loading and real‑time lighting.
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 details JD's mini‑program AR/VR integration, covering the background, technical architecture, key challenges such as data transfer, format conversion, and concurrency, and the performance optimizations that enable stable 24‑plus FPS face‑tracking on mid‑range devices.
This article provides a comprehensive introduction to WebGL, covering its relationship with OpenGL ES, differences from Canvas and SVG, performance comparisons, step‑by‑step code examples for drawing points, squares and shaders, and explains the complete rendering pipeline for front‑end developers.
This article details the background, problems, and comprehensive refactoring plan for the xGis web‑based 3D map library, covering event classification, API design, layer interaction proxy, CPU/GPU picking implementations, performance trade‑offs, and future optimization directions.
The article details how Taobao Life’s “Life Cabin” feature was built using the in‑house Hilo3D WebGL engine, describing a pipeline that converts Maya‑exported USD models to GLTF, sets up cameras and controls, manages avatar movement, implements interactive furniture logic, and applies shadow‑map and baked‑light optimizations for smooth performance.
This article examines how WebAssembly can accelerate canvas and WebGL animation engines by redesigning data structures, separating JS and WASM animation objects, optimizing the update cycle, handling mixed animations, and presenting benchmark results for thousands of animated nodes.
This article reviews the evolution of data visualization from early charts to modern interactive graphics, analyzes major visualization categories and schools of thought, discusses technical challenges and emerging web and graphics technologies, and highlights the role of visualization in big‑data analytics and BI solutions.
Facing memory leaks and high CPU load in a Canvas‑based avatar editor, the team switched to WebGL, leveraging GPU parallelism, off‑screen framebuffers, and blending techniques to dramatically reduce memory consumption and CPU usage while adding features like image layering and color blending.
This article details the four‑year development of SpriteJS, a high‑performance, cross‑platform graphics system that supports WebGL and Canvas2D rendering, DOM‑like APIs, responsive design, WebWorker integration, and extensive performance optimizations for visualisation and game applications.
This article shares Taobao Life's journey into the Metaverse, detailing how to evaluate and select mobile 3D engines, compare Web, Native and Hybrid approaches, build professional 3D art workflows, balance visual quality with performance, and cultivate a battle‑ready 3D team.
This article explains how to use Three.js to create a realistic 3D phone product page by loading and applying multimedia assets such as custom fonts, textures, audio sources, and video textures, and demonstrates interactive features like ray‑casting for material switching and first‑person controls.
This article provides an in‑depth tutorial on creating and customizing Cesium entities and primitives—including boxes, points, and various geometric shapes—explaining their properties, visual attributes, performance considerations, and offering complete JavaScript code examples for interactive 3D earth visualizations.
This article explains how to create a Camera class in WebGL, compute view and rotation matrices using lookAt, apply them to render a cube from arbitrary positions, and discusses why parts of the cube may be clipped when the camera is placed at [0.5,0.5,0.5].
This article explains how to represent, combine, and invert 2D and 3D transformations with matrices, demonstrates rotation around arbitrary axes, scaling in any direction, and provides JavaScript code for generating rotation matrices in WebGL contexts.
This article demonstrates how to use Three.js post‑processing techniques, including EffectComposer, RenderPass, BloomPass, and custom shaders, to build an animated 3D scene featuring a glowing portal and Rick and Morty model, covering shader setup, layer management, animation, and UI controls for fine‑tuning.
This tutorial walks through the fundamental steps of using Three.js—including scene creation, camera configuration, renderer setup, model loading, orbit controls, animation, and responsive resizing—by illustrating each concept with clear code examples and a storytelling analogy.
This article explains the WebXR standard for rendering 3D scenes in browsers, covers its history, browser support, step‑by‑step usage with WebGL, details the WebXR Device API objects such as XRSystem, XRSession, XRReferenceSpace, and demonstrates a panoramic VR image viewer with full code examples.
This article explains the fundamentals of virtual reality, the WebGL and OpenGL APIs, and demonstrates how to create interactive VR panoramas for houses and cars using three.js, covering scene setup, cameras, renderers, geometry, textures, materials, lighting, and user interaction with concise code examples.
This article explains how to build various particle effects in Three.js using THREE.Sprite, THREE.Points, dat.GUI, Canvas textures, and custom shaders, and combines them into an interactive 3D scene featuring a wandering astronaut, fog effects, and real‑time parameter controls.
This tutorial demonstrates how to create a two‑page 3D web experience using Three.js, Blender‑compressed models, DRACOLoader for efficient loading, Tween.js for smooth animations, custom cursor handling, lighting effects, and responsive rendering, complete with code snippets and deployment instructions.
This newsletter curates a selection of technical articles covering custom WebAssembly JavaScript runtimes, the evolution of JavaScript frameworks competing with native SDKs, fast component preview and debugging, an introduction to Web 3D graphics, the new CSS transform individual property, essential JavaScript utility methods, and an overview of CesiumJS for 3D earth visualization.
This article guides beginners through the fundamentals of computer graphics, explaining OpenGL, WebGL, GLSL, and the rendering pipeline, then demonstrates practical Three.js code for setting up scenes, cameras, lights, materials, and textures to create interactive 3D web experiences.
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.
Adobe’s $20 billion purchase of the web‑based design platform Figma, announced in September 2022, sparks debate over its impact on web standards, open‑source alternatives like Penpot, and the future of frontend development built on technologies such as WebGL, JavaScript and WebAssembly.
This article explains the motivation, architecture, and implementation details of a generic map component that supports real‑time heatmap rendering using ThreeJS, covering GIS layer protocols, canvas limitations, WebGL advantages, and code examples for creating radial gradients, instanced meshes, and custom shaders.
Chrome 104 Beta brings region capture for video conferencing, new origin trials like shared element transitions, optional Secure Payment Confirmation opt‑out, updated speculative parsing, multi‑screen window placement, focus‑visible CSS, WebGL color management, and deprecates several legacy APIs, with the stable release slated for August 2.
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 explains how to use WebGL shaders and signed distance functions to draw rectangles and rounded rectangles, covering basic shader setup, SDF formulas for circles, boxes, and rounded boxes, and applying antialiasing techniques to achieve smooth edges for dynamic UI cards.
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 how the Crystal WebGL engine leverages IndexedDB to reduce network requests, accelerate three‑dimensional data loading, and implement efficient caching and update mechanisms, thereby significantly improving overall rendering performance and user experience.
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.
This article introduces WebGL fundamentals for frontend developers, explaining GPU versus CPU, GLSL shaders, and how JavaScript prepares data, followed by step‑by‑step code examples of fragment and vertex shaders, custom primitives, and using the gl‑renderer library to render graphics.
This article introduces WebGPU—a powerful yet still experimental web graphics API—showing how major frameworks like Three.js and Babylon.js adopt it for high‑performance 3D rendering, how TensorFlow.js leverages it for massive deep‑learning speedups, and provides hands‑on code examples from framework usage to raw WebGPU programming.
Version 0.7 of the open‑source Oasis Engine introduces a suite of enhancements—including a new text renderer, ClearCoat PBR material, dynamic PhysX colliders, expanded BlendShape support, HDR skybox loading, keyboard interaction, and API refinements—plus comprehensive documentation and example updates for developers.
This article details how Alipay’s 2022 ‘Air Writing’ AR feature was built for the Five‑Fortune project, covering the technical challenges, the front‑end stack—including Vite, Oasis Engine, ARSession, and WebGL shaders—implementation steps for drawing, vectorizing, extruding characters, playback handling, and memory‑performance optimizations.
The article explains how to achieve real‑time AI‑driven AR beauty effects in browsers by unifying media input with MediaStream, down‑sampling frames, accelerating detection via WebAssembly‑SIMD and GPU, constructing a 2D facial mesh for mask positioning, rendering makeup with custom WebGL shaders, and integrating the full pipeline into Tencent Cloud Vision Cube for seamless web and mini‑program live‑stream experiences.
This article demonstrates how to build a low‑poly 3D browser game using Three.js, React, and Cannon.js, covering resource loading, scene setup, physics with Heightfield terrain, joystick controls, animation handling, UI flow, and deployment, with full code examples and implementation details.
The article surveys digital‑human technology—covering visual form, motion and AI‑driven intelligence—its fast‑growing market, a three‑layer solution stack (hardware/software base, AI platform, application services), end‑to‑end avatar creation workflow, rendering and animation techniques, web‑deployment challenges, and future prospects such as deeper AI, XR/6G and metaverse integration.
This tutorial demonstrates how to build a fire‑animated Elden Ring logo using React, Three.js, and the Fire.js extension, covering background setup, resource import, scene initialization, fire effect configuration, responsive scaling, camera animation, and rendering loop with complete code examples.
Texture compression dramatically reduces memory and CPU decode costs while allowing GPUs to read data directly, making formats such as ETC1/2, ASTC, PVRTC and S3TC essential for WebGL and mobile game graphics, though developers must manage lossy quality, size constraints, and platform support.
