BestHub
Sign in
Tagged articles

WebGL

192 articles · Page 1 of 2
Geek Labs
Geek Labs
Jul 31, 2026 · Industry Insights

5 Open-Source Developer Tools That Redefine Databases, Search, and UI Components

This article reviews five standout open-source tools—Turbovec for Rust-based vector search, Larql as a high-performance GraphQL engine, GoNavi a lightweight multi-source database client, Canvas UI a WebGL-enhanced HTML component library, and Kero a native macOS terminal workspace—highlighting their design choices, performance benefits, and ideal use cases.

DatabaseDeveloper utilitiesGraphQL
0 likes · 9 min read
5 Open-Source Developer Tools That Redefine Databases, Search, and UI Components
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Jul 30, 2026 · Frontend Development

HTML-in-Canvas Lands: Introducing the First GPU‑Level UI Component Library

The article explains how HTML-in-Canvas bridges the long‑standing gap between DOM and Canvas by delivering Canvas UI, an open‑source library that wraps GPU rendering, shaders and animation logic into 25+ ready‑to‑use components, supports major frameworks, and outlines its current experimental limitations.

Canvas UIGPU renderingHTML-in-Canvas
0 likes · 7 min read
HTML-in-Canvas Lands: Introducing the First GPU‑Level UI Component Library
Old Zhang's AI Learning
Old Zhang's AI Learning
Jul 29, 2026 · Frontend Development

Turn Scientific Visualizations into Reusable Skills: 10 Open‑Source Interactive Experiments

The article presents z‑sci‑viz‑lab, a reusable Skill that transforms scientific concepts into single‑page interactive demos, outlines an eight‑step workflow, shows two usage patterns, details the Vite + Three.js + Canvas stack, and demonstrates nine concrete experiments ranging from eclipses to plate tectonics.

FrontendThree.jsVite
0 likes · 13 min read
Turn Scientific Visualizations into Reusable Skills: 10 Open‑Source Interactive Experiments
Full-Stack Cultivation Path
Full-Stack Cultivation Path
May 9, 2026 · Frontend Development

HTML‑in‑Canvas: Boosting Front‑End Interactivity

HTML‑in‑Canvas is a WICG proposal that lets browsers render real DOM output directly onto a canvas, preserving layout, styling and accessibility while enabling GPU‑accelerated rendering, offering a declarative alternative to manual canvas drawing and opening new possibilities for UI, data‑visualization, game and WebGL interfaces.

CanvasFront-endHTML-in-Canvas
0 likes · 6 min read
HTML‑in‑Canvas: Boosting Front‑End Interactivity
SuanNi
SuanNi
Apr 15, 2026 · Industry Insights

How Spark 2.0 Brings Billion‑Point 3D Worlds to Mobile Browsers

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.

3D renderingBrowser graphicsGaussian Splatting
0 likes · 13 min read
How Spark 2.0 Brings Billion‑Point 3D Worlds to Mobile Browsers
Bilibili Tech
Bilibili Tech
Mar 31, 2026 · Artificial Intelligence

Can AI Generate Real‑Time, Editable Motion Graphics? Inside Neon Vibe Motion

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.

AI motion graphicsCanvas 2DLLM code generation
0 likes · 25 min read
Can AI Generate Real‑Time, Editable Motion Graphics? Inside Neon Vibe Motion
AI Insight Log
AI Insight Log
Jan 30, 2026 · Frontend Development

Three.js Gets AI Skills: Structured Knowledge Boosts 3D Code Generation

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.

AI codingSkillsThree.js
0 likes · 7 min read
Three.js Gets AI Skills: Structured Knowledge Boosts 3D Code Generation
Node.js Tech Stack
Node.js Tech Stack
Jan 27, 2026 · Frontend Development

Three.js Gets Its Own AI Skills – Making 3D Coding No Longer a Headache

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.

AIOpen-sourceThree.js
0 likes · 7 min read
Three.js Gets Its Own AI Skills – Making 3D Coding No Longer a Headache
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 6, 2025 · Frontend Development

Build Realistic 3D Trees in Three.js with ez‑Tree – Quick Installation & Usage Guide

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.

3D treesGraphicsJavaScript
0 likes · 4 min read
Build Realistic 3D Trees in Three.js with ez‑Tree – Quick Installation & Usage Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 20, 2025 · Frontend Development

Build a Galactic Hero Section with Three.js: From Starfield to Shaders

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.

3D graphicsFrontendGLSL
0 likes · 19 min read
Build a Galactic Hero Section with Three.js: From Starfield to Shaders
Goodme Frontend Team
Goodme Frontend Team
Oct 20, 2025 · Frontend Development

Boost Mini‑Program Animations with Galacean Effects: A Taro 3.x Guide

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.

Animation OptimizationGalacean EffectsMini Program
0 likes · 13 min read
Boost Mini‑Program Animations with Galacean Effects: A Taro 3.x Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2025 · Game Development

Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide

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.

3DCollision DetectionGame Development
0 likes · 30 min read
Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 26, 2025 · Game Development

Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls

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.

3DAIBlender
0 likes · 35 min read
Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 31, 2025 · Frontend Development

Advanced Three.js Hero Section with Shaders, Particles, Lighting, and UI

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.

Particle SystemShaderThree.js
0 likes · 21 min read
Advanced Three.js Hero Section with Shaders, Particles, Lighting, and UI
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 22, 2025 · Frontend Development

Recreating Genshin Impact Moon Scene with Three.js – A Step‑by‑Step Tutorial

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.

3D graphicsGenshin ImpactThree.js
0 likes · 10 min read
Recreating Genshin Impact Moon Scene with Three.js – A Step‑by‑Step Tutorial
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 6, 2025 · Frontend Development

Advanced Three.js 3D Visualization: Grid Helpers, Line Rendering, GUI Controls, Animations, Bezier Connections, Particle Tornado, and Bloom Effects

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.

3d-visualizationThree.jsWebGL
0 likes · 47 min read
Advanced Three.js 3D Visualization: Grid Helpers, Line Rendering, GUI Controls, Animations, Bezier Connections, Particle Tornado, and Bloom Effects
Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Dec 17, 2024 · Game Development

How Crab’s WebGL Engine Powers Game‑Level Animations on the Web

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.

Animation EngineFrontendGame Development
0 likes · 23 min read
How Crab’s WebGL Engine Powers Game‑Level Animations on the Web
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 14, 2024 · Frontend Development

Creating Stunning 3D Map Visualizations with AMap and Three.js

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.

AmapThree.jsWebGL
0 likes · 15 min read
Creating Stunning 3D Map Visualizations with AMap and Three.js
MoonWebTeam
MoonWebTeam
Oct 31, 2024 · Frontend Development

Why WebGL Is Fading and How WebGPU Is Shaping the Future of Web AI

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.

Graphics APIWeb AIWebGL
0 likes · 24 min read
Why WebGL Is Fading and How WebGPU Is Shaping the Future of Web AI
Kuaishou Tech
Kuaishou Tech
Oct 16, 2024 · Frontend Development

How Kola2d’s WebGL Engine Achieves 50+ FPS for Million‑Cell Spreadsheets

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.

GPUKola2dOnline Spreadsheet
0 likes · 19 min read
How Kola2d’s WebGL Engine Achieves 50+ FPS for Million‑Cell Spreadsheets
vivo Internet Technology
vivo Internet Technology
Jul 17, 2024 · Frontend Development

Optimizing 3D Model Loading and First‑Frame Rendering with Three.js, ZIP Packaging, and WASM Decompression

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.

3D model optimizationThree.jsWasm
0 likes · 11 min read
Optimizing 3D Model Loading and First‑Frame Rendering with Three.js, ZIP Packaging, and WASM Decompression
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 15, 2024 · Frontend Development

Simple Car Implementation with three.js: Grouping, Camera Follow, Controls, Wheel Rotation, and Parking Feature

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.

Three.jsWebGLcamera control
0 likes · 6 min read
Simple Car Implementation with three.js: Grouping, Camera Follow, Controls, Wheel Rotation, and Parking Feature
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 26, 2024 · Frontend Development

Step‑by‑Step Ocean Simulation with three.js

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.

3D graphicsOcean simulationThree.js
0 likes · 13 min read
Step‑by‑Step Ocean Simulation with three.js
ByteFE
ByteFE
May 7, 2024 · Frontend Development

Optimizing Frontend Interactive Rendering with WebAssembly and WebGL: Architecture, Performance, and Practical Applications

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.

Lottie AnimationRendering EngineSprite Sheet Compression
0 likes · 11 min read
Optimizing Frontend Interactive Rendering with WebAssembly and WebGL: Architecture, Performance, and Practical Applications
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 2, 2024 · Frontend Development

Creating a Pepyaka Shader Effect with Three.js: Sphere, Noise, Particle System, and Text Overlay

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.

GraphicsParticle SystemTutorial
0 likes · 23 min read
Creating a Pepyaka Shader Effect with Three.js: Sphere, Noise, Particle System, and Text Overlay
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 3, 2024 · Frontend Development

Recreating the Xiaomi SU7 Showcase Webpage with three.js and Custom Shaders

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.

FrontendGLSLPostProcessing
0 likes · 18 min read
Recreating the Xiaomi SU7 Showcase Webpage with three.js and Custom Shaders
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 19, 2024 · Frontend Development

City Data Visualization Demo with Three.js, Vite, and TypeScript

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.

3d-visualizationTypeScriptVite
0 likes · 18 min read
City Data Visualization Demo with Three.js, Vite, and TypeScript
Bilibili Tech
Bilibili Tech
Feb 23, 2024 · Mobile Development

Optimizing WebGL Rendering for Mobile Digital Human Performance

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.

PBRWebGLanti-aliasing
0 likes · 18 min read
Optimizing WebGL Rendering for Mobile Digital Human Performance
Amap Tech
Amap Tech
Jan 11, 2024 · Frontend Development

Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context

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.

AmapEffectComposerFrontend
0 likes · 11 min read
Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context
php Courses
php Courses
Nov 27, 2023 · Frontend Development

Implementing Multi‑Window 3D Synchronization with three.js

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.

FrontendJavaScriptMulti-Window
0 likes · 13 min read
Implementing Multi‑Window 3D Synchronization with three.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 20, 2023 · Frontend Development

Building a High‑Performance Genshin Impact Map with CanvasKit, Gesture Recognition, and React/Vue Integration

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.

CanvasKitMap RenderingVue
0 likes · 14 min read
Building a High‑Performance Genshin Impact Map with CanvasKit, Gesture Recognition, and React/Vue Integration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 18, 2023 · Game Development

Recreating the Genshin Impact Login Screen with Three.js Shaders

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.

Game DevelopmentGraphicsInstancedMesh
0 likes · 8 min read
Recreating the Genshin Impact Login Screen with Three.js Shaders
Zhengtong Technical Team
Zhengtong Technical Team
Aug 23, 2023 · Game Development

Enhancing Bloom Effect in WebGL: Implementation, Optimization, and Performance Comparison

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.

BloomGraphicsOptimization
0 likes · 7 min read
Enhancing Bloom Effect in WebGL: Implementation, Optimization, and Performance Comparison
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 16, 2023 · Game Development

Creating a Naruto-Themed 3D World with three.js: Model Loading, Controls, Animation, and Octree Collision

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.

Collision DetectionGame DevelopmentJavaScript
0 likes · 22 min read
Creating a Naruto-Themed 3D World with three.js: Model Loading, Controls, Animation, and Octree Collision
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 14, 2023 · Frontend Development

Three.js API Wrapper and 3D Visualization in a Vue3 Project

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.

3d-visualizationJavaScriptVue3
0 likes · 13 min read
Three.js API Wrapper and 3D Visualization in a Vue3 Project
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 10, 2023 · Frontend Development

Creating a Time‑Travel Tunnel Effect with Three.js

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.

3DJavaScriptTutorial
0 likes · 11 min read
Creating a Time‑Travel Tunnel Effect with Three.js
ByteFE
ByteFE
Jul 19, 2023 · Frontend Development

WebAssembly‑Based Video Editing: Architecture, Multithreading, Graphics, and Performance Optimizations

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.

EmscriptenWebAssemblyWebGL
0 likes · 30 min read
WebAssembly‑Based Video Editing: Architecture, Multithreading, Graphics, and Performance Optimizations
ByteFE
ByteFE
Jul 17, 2023 · Frontend Development

Understanding WebGL, Its Frameworks, and Performance Optimization Strategies

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.

3D graphicsJavaScriptWebGL
0 likes · 24 min read
Understanding WebGL, Its Frameworks, and Performance Optimization Strategies
Amap Tech
Amap Tech
Jul 13, 2023 · Frontend Development

Implementing Automatic Cruise Navigation on AMap with Three.js

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.

AmapAuto NavigationJavaScript
0 likes · 16 min read
Implementing Automatic Cruise Navigation on AMap with Three.js
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 13, 2023 · Game Development

Building an H5 Platformer Game with Alice.js and React

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.

Alice.jsGame DevelopmentReAct
0 likes · 22 min read
Building an H5 Platformer Game with Alice.js and React
vivo Internet Technology
vivo Internet Technology
Jul 12, 2023 · Frontend Development

Building an Immersive Web 3D Exhibition Hall with Three.js and Blender

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.

3D modelingBlenderThree.js
0 likes · 21 min read
Building an Immersive Web 3D Exhibition Hall with Three.js and Blender
Aotu Lab
Aotu Lab
Jun 1, 2023 · Frontend Development

How We Built a 3D Web Shopping Experience with Babylon.js and React

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.

3DFrontendOptimization
0 likes · 17 min read
How We Built a 3D Web Shopping Experience with Babylon.js and React
DaTaobao Tech
DaTaobao Tech
May 17, 2023 · Frontend Development

Introduction to 3D Rendering Technologies: OpenGL, OpenGL ES, WebGL, and Front‑End Engines

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.

3D renderingFrontendGLSL
0 likes · 11 min read
Introduction to 3D Rendering Technologies: OpenGL, OpenGL ES, WebGL, and Front‑End Engines
TAL Education Technology
TAL Education Technology
Apr 13, 2023 · Frontend Development

A Simple Introduction to WebGL for Frontend Visualization

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.

CanvasFrontendGraphics
0 likes · 15 min read
A Simple Introduction to WebGL for Frontend Visualization
ByteFE
ByteFE
Apr 12, 2023 · Frontend Development

Design and Refactoring of the xGis 3D Map Event System and Picking Engine

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.

3D mappingCPUGPU
0 likes · 22 min read
Design and Refactoring of the xGis 3D Map Event System and Picking Engine
DaTaobao Tech
DaTaobao Tech
Mar 15, 2023 · Game Development

Technical Implementation of the "Life Cabin" 3D Virtual Scene in Taobao Life

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.

3D renderingGame DevelopmentHilo3D
0 likes · 16 min read
Technical Implementation of the "Life Cabin" 3D Virtual Scene in Taobao Life
AsiaInfo Technology: New Tech Exploration
AsiaInfo Technology: New Tech Exploration
Feb 3, 2023 · Industry Insights

How Data Visualization Shapes Big Data Analysis: Evolution, Techniques, and Trends

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.

BIData VisualizationOpenGL
0 likes · 21 min read
How Data Visualization Shapes Big Data Analysis: Evolution, Techniques, and Trends
ByteFE
ByteFE
Dec 26, 2022 · Frontend Development

Design and Implementation of SpriteJS: A Cross‑Platform WebGL/Canvas2D Rendering Engine

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.

Canvas2DGraphicsRendering
0 likes · 18 min read
Design and Implementation of SpriteJS: A Cross‑Platform WebGL/Canvas2D Rendering Engine
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 30, 2022 · Frontend Development

Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)

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.

3DFrontendJavaScript
0 likes · 19 min read
Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 29, 2022 · Frontend Development

Comprehensive Guide to Using Entity and Primitive Methods for 3D Earth Visualization with Cesium

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.

3d-visualizationCesiumGeospatial
0 likes · 18 min read
Comprehensive Guide to Using Entity and Primitive Methods for 3D Earth Visualization with Cesium
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 23, 2022 · Frontend Development

Implementing a Camera and View Matrix in WebGL

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].

3DGraphicsCameraJavaScript
0 likes · 14 min read
Implementing a Camera and View Matrix in WebGL
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 18, 2022 · Frontend Development

Creating a Glowing Portal Effect in Three.js with Post‑Processing

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.

3D animationJavaScriptShader
0 likes · 24 min read
Creating a Glowing Portal Effect in Three.js with Post‑Processing
ByteFE
ByteFE
Nov 2, 2022 · Frontend Development

Understanding WebXR: API Overview, Device Interaction, and VR/AR Development

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.

ARJavaScriptVR
0 likes · 25 min read
Understanding WebXR: API Overview, Device Interaction, and VR/AR Development
ELab Team
ELab Team
Oct 20, 2022 · Frontend Development

Build Immersive Web VR Panoramas with Three.js: A Step‑by‑Step Guide

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.

3D graphicsThree.jsVR Panorama
0 likes · 24 min read
Build Immersive Web VR Panoramas with Three.js: A Step‑by‑Step Guide
ByteFE
ByteFE
Sep 30, 2022 · Frontend Development

Curated Technical Reads: WebAssembly Runtime, JavaScript Frameworks, Component Preview, Web 3D, CSS Transform, JS Utility Methods, and CesiumJS

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.

CSSCesiumJSFrontend
0 likes · 6 min read
Curated Technical Reads: WebAssembly Runtime, JavaScript Frameworks, Component Preview, Web 3D, CSS Transform, JS Utility Methods, and CesiumJS
ELab Team
ELab Team
Sep 28, 2022 · Frontend Development

Master WebGL & Three.js: From Basics to 3D Rendering in the Browser

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.

3D renderingFrontendGPU
0 likes · 20 min read
Master WebGL & Three.js: From Basics to 3D Rendering in the Browser
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 11, 2022 · Frontend Development

Design and Implementation of a Generic Map Component with Real‑time Heatmap Rendering Using ThreeJS

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.

GISWebGLheatmap
0 likes · 14 min read
Design and Implementation of a Generic Map Component with Real‑time Heatmap Rendering Using ThreeJS
21CTO
21CTO
Jun 28, 2022 · Frontend Development

What’s New in Chrome 104 Beta? Key Front‑End Features Unveiled

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.

CSSChromeSecure Payment Confirmation
0 likes · 3 min read
What’s New in Chrome 104 Beta? Key Front‑End Features Unveiled
ByteFE
ByteFE
Jun 22, 2022 · Frontend Development

Understanding WebGL from Scratch: Color Manipulation and Shader Techniques

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.

Fragment ShadersGLSLShader Programming
0 likes · 7 min read
Understanding WebGL from Scratch: Color Manipulation and Shader Techniques
WeChatFE
WeChatFE
Jun 15, 2022 · Frontend Development

How to Render Rounded Rectangles in WebGL Using Signed Distance Fields

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.

AntialiasingRounded RectangleShader
0 likes · 16 min read
How to Render Rounded Rectangles in WebGL Using Signed Distance Fields
ByteFE
ByteFE
Jun 15, 2022 · Frontend Development

Using Polar Coordinates in WebGL Shaders to Create Complex Patterns

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.

GLSLGraphicsPolar Coordinates
0 likes · 6 min read
Using Polar Coordinates in WebGL Shaders to Create Complex Patterns
ByteFE
ByteFE
Jun 8, 2022 · Frontend Development

Understanding Distance Fields for Triangles, Regular Polygons, and Ellipses in WebGL

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.

Distance FieldsGLSLGeometry
0 likes · 13 min read
Understanding Distance Fields for Triangles, Regular Polygons, and Ellipses in WebGL
ByteFE
ByteFE
Jun 1, 2022 · Frontend Development

Understanding and Implementing Distance Fields in WebGL (Part 2)

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.

Distance FieldFrontendGLSL
0 likes · 9 min read
Understanding and Implementing Distance Fields in WebGL (Part 2)
ByteFE
ByteFE
May 18, 2022 · Frontend Development

Understanding WebGL: GPU Basics, Shaders, and Practical Code Examples

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.

FrontendGPUGraphics
0 likes · 11 min read
Understanding WebGL: GPU Basics, Shaders, and Practical Code Examples
Alibaba Terminal Technology
Alibaba Terminal Technology
May 17, 2022 · Frontend Development

Unlock 20‑30× GPU Speed: WebGPU in Three.js, Babylon.js, and TensorFlow.js

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.

Babylon.jsGPUGraphics
0 likes · 17 min read
Unlock 20‑30× GPU Speed: WebGPU in Three.js, Babylon.js, and TensorFlow.js
Alipay Experience Technology
Alipay Experience Technology
May 5, 2022 · Game Development

What’s New in Oasis Engine v0.7? Explore the Latest Graphics, Physics, and Animation Features

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.

Game DevelopmentGraphicsOasis Engine
0 likes · 8 min read
What’s New in Oasis Engine v0.7? Explore the Latest Graphics, Physics, and Animation Features
Alipay Experience Technology
Alipay Experience Technology
Apr 26, 2022 · Frontend Development

How Alipay’s AR ‘Air Writing’ Brings Fortune Characters to Life in Mini‑Games

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.

ARMini‑ProgramOasis Engine
0 likes · 18 min read
How Alipay’s AR ‘Air Writing’ Brings Fortune Characters to Life in Mini‑Games
Tencent Cloud Developer
Tencent Cloud Developer
Apr 24, 2022 · Artificial Intelligence

Real-Time AI-Powered AR Beauty Effects on the Web

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.

AI face detectionBeauty FilterReal-time Rendering
0 likes · 7 min read
Real-Time AI-Powered AR Beauty Effects on the Web