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.
This article demonstrates how to recreate the Three.js Journey floating 3D text effect using a React and Three.js stack, covering resource imports, DOM structure, state management, CSS grid background, font loading, geometry creation, mouse interaction, fullscreen handling, post‑processing effects, and responsive scaling.
This article introduces the fundamentals of 2D drawing on the web using SVG, Canvas, and WebGL, compares their strengths, demonstrates code examples for shapes and paths, explains event handling and picking methods, and provides practical performance optimization strategies for rendering and interaction.
This tutorial explains the concepts of first‑person and third‑person perspectives and provides a step‑by‑step guide, including matrix theory and complete Three.js code, to create a camera that smoothly follows a character in a web‑based 3D game.
This article demonstrates how to build an interactive Winter Olympics-themed 3D web page using Three.js and React, covering model loading, custom materials, lighting, particle effects, and camera controls, with detailed code snippets and explanations for each component.
This talk explains how Ant Group’s frontend engineers built edge‑AI services that run directly in browsers, boosting real‑time performance, preserving privacy, and cutting cloud costs, while showcasing two real‑world cases—pet identification and screen‑break insurance—and detailing the WebGL‑based engine optimizations that lifted device coverage from 30% to 93%.
This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.
This article explains the challenges and techniques for delivering physically‑based, high‑fidelity rendering on mobile platforms, covering material models, lighting equations, spherical‑harmonic baking, HDR workflows, and how the Oasis engine streamlines development with an online editor and cloud tools.
In this translated AMA, Three.js creator Ricardo Cabello discusses his journey from the Demoscene to Google, the evolution of Three.js, challenges of open‑source maintenance, performance optimizations, WebGL versus WebGPU, VR/AR prospects, and the future role of web graphics in the metaverse.
This talk explains how minimizing draw calls in Canvas2D and WebGL dramatically improves rendering speed for large graph visualizations, covering CPU‑GPU interaction, culling, dirty‑rectangle rendering, batch rendering, and GPU‑driven calculations to achieve smoother 60 FPS interactions.
The article details how to create the AI‑driven “Object Hunt Battle” game by processing data, designing and training a PP‑LCNet model with PaddleClas, converting it for Paddle.js, and integrating real‑time WebGL inference on mobile devices, achieving sub‑50 ms latency and encouraging developers to explore further.
This tutorial explains how to recreate Meta’s animated 3D logo by combining Three.js geometry, Blender modeling, FBX loading, custom materials, animation mixers, raycasting for interaction, and progress tracking, providing a complete step‑by‑step guide for web‑based 3D development.
This tutorial walks through creating a 3D login page using Vue 3 and three.js, covering scene setup, lighting, camera configuration, renderer initialization, animation loops, and additional effects such as an orbiting earth, star field, and moving clouds.
This tutorial walks through redesigning a complex role‑relationship page using PIXIJS for 2D rendering, custom GLSL shaders for cloud effects, TWEENJS for smooth animations, and careful performance tuning to ensure responsive behavior across devices.
This article examines high‑performance web computing for TensorFlow.js models, comparing tfjs and ant‑tfjs on WebGL, Wasm, and GPU backends, and details a series of optimizations—including pre‑encoding, shader handling, graph fusion, vectorization, and memory layout—that double inference speed on mobile devices.
This article explains how GPU.js can accelerate large‑scale medical image windowing in web browsers, reducing latency and preventing crashes, while sharing practical code examples, common pitfalls, and performance benchmarks for both browser and Node environments.
Seven university interns spent a summer at Alibaba's Taobao Front‑End Interactive team, gaining hands‑on experience with Eva.js, WebGL, React, engineering processes, and team collaboration while reflecting on personal growth, technical challenges, and the supportive workplace culture.
This article introduces WebGL as a JavaScript API for 2D/3D graphics, outlines its history and basic concepts, demonstrates drawing a triangle with the native WebGL API, discusses its drawbacks, and shows how to create a rotating cube using the Three.js framework with complete code examples.
This article introduces WebGL, covering its definition, history, basic concepts, working principles, and practical examples of drawing shapes using both native WebGL API and the Three.js framework.
This article walks through the complete redesign of the Linggan VR website, detailing problem discovery, a five‑question analysis, three core design themes, storyboarding, collaborative development, responsive layout choices, technical trade‑offs for 3D animation, SEO considerations, and the final launch.
This article is based on the 2021 GMTC Global Frontend Technology Conference's 'New Trends in Mobile Technology' sub-topic, sharing the theme 'VR and 3D Technology Architecture Design and Practice on the Web', and is organized from the original presentation.
This tutorial walks through setting up a basic Three.js project, explaining core concepts like scene, camera, and renderer, and provides step‑by‑step HTML and JavaScript code to display a simple axis helper and a wireframe sphere in the browser.
The Eagle.gl Web 3D engine, built atop Three.js, provides a unified 2D/3D GIS platform that efficiently loads, renders, and edits massive point‑cloud, vector, and model map data with real‑time LOD, GPU picking, DEM terrain integration, and configurable styling, supporting AMap’s HD‑map production and future autonomous‑driving simulation.
This article traces the origins of reaction videos from 1970s Japanese TV to global internet fame, examines their cultural significance, and details a cloud‑based implementation that combines Intel GPUs, Alibaba Cloud services, and AI‑enhanced AR features for interactive streaming.
Mapbox GL JS is an open-source JavaScript library using WebGL for rendering interactive 2D/3D maps, offering advantages over traditional 2D tile-based solutions like Leaflet through vector data support, customizable styles, and efficient data handling via WebGL.
The article details DiDi’s development of a real‑time, large‑screen data‑visualization system built on a custom WebGL‑based map framework, describing how they tackled one‑time map loading, massive data compression, and high‑performance rendering of trajectories, bubbles, heatmaps, flight lines and animated scatter points, supported by interactive debugging tools.
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 article walks through the technical foundations behind Taobao Life’s virtual avatar system, covering industry context, real‑time 3D rendering pipelines, dynamic clothing and beauty effects, facial‑capture AR integration, and the trade‑offs of building such experiences with Web technologies.
The article explains how JavaScript handles binary data by using ArrayBuffer as raw memory, TypedArray and DataView as typed views for reading and writing with endianness control, and Blob for file‑like binary objects, detailing their constructors, methods, and typical use cases such as WebGL, file upload, and image display.
This article explores how SpaceX’s rocket control console is built with JavaScript, examines Flutter 2’s cross‑platform capabilities, details the WebGL techniques behind GitHub’s interactive globe, breaks down logistic regression for recommendation systems, and provides an overview of Huawei’s Harmony OS for developers.
This article explains the technical pipeline behind Taobao Life’s virtual avatar rendering, covering industry context, cross‑industry use cases, the core rendering workflow, dynamic outfit and beauty processing, face‑morph techniques, AR integration, and the trade‑offs of using Web technologies for high‑fidelity 3D experiences.
The article guides front‑end developers from basic 2D charting to immersive 3D data visualizations, explaining WebGL’s rendering pipeline, comparing libraries such as Three.js and Babylon.js, detailing camera, lighting, model handling techniques, and showing how Draco compression dramatically shrinks GLB assets while preserving quality.
This article explains four practical approaches to creating 360° panoramic experiences for web pages—using pure CSS3 3D transforms, the Three.js WebGL engine, the lightweight Pannellum viewer, and the professional krpano tool—detailing their concepts, code implementations, advantages, and trade‑offs for hotel and real‑estate applications.
This tutorial explains how to synchronize HTML elements with a WebGL scene using three.js, create a twisted gallery effect through custom shaders, handle image loading, and implement scroll-driven distortion using locomotive-scroll and GSAP, providing complete code examples and implementation steps.
This article provides a comprehensive overview of Oasis Engine, detailing its component‑based architecture, TypeScript implementation, key features such as Transform, resource and shader systems, its stability and performance achievements, historical development phases, and future roadmap for cross‑platform and open‑source enhancements.
The article introduces Oasis Engine, a Web‑based 3D interactive graphics engine, detailing its component‑based architecture, TypeScript scripting, core systems such as Transform, resource and shader management, performance benchmarks, historical development stages, and future open‑source roadmap.
The article explains how AMap JSAPI 2.0 achieves realistic 3‑D building lighting by applying the Blinn‑Phong model with ambient, diffuse and specular components, employing directional, point and spot lights together with a classic three‑point lighting setup—including a high‑altitude point light over the Oriental Pearl Tower—to produce depth‑rich, non‑flat visualizations.
This article explains how to implement a dynamic video‑clip effect using Bezier‑curve‑based position, rotation, easing functions, and motion blur in a WebGL shader for Tencent’s Weijian mini‑program, detailing the mathematics, shader code, and practical steps to achieve smooth, natural animations.
The article explores how Qixiu’s PC web client evolved gift‑animation formats—from Flash and APNG to a custom IXD and dual‑MP4 with alpha channel—optimizing file size, loading speed, and rendering performance via Canvas and WebGL, ultimately choosing the MP4 solution for quality, efficiency, and designer friendliness.
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 guide explores the full spectrum of H5 animation techniques—including GIFs, sprite‑sheet frames, CSS keyframe animations, Lottie, WebGL/Canvas performance trade‑offs, and a comparative overview of popular game engines—providing practical code snippets, compatibility notes, and implementation tips for modern web developers.
The article reviews Vue 3's official release, explains the Teleport feature for rendering content outside component trees, introduces the lightweight vue‑lit library for building Web Components with Vue's reactivity, and highlights related graphics experiments, legacy version comparisons, and Taro integration for mini‑program development.
This week’s WecTeam Front‑end newsletter showcases a WebGL implementation of Conway’s Game of Life that treats the GPU as a parallel for‑loop accelerator, and introduces the CSS content-visibility:auto property, which lets browsers defer layout and rendering of off‑screen elements to dramatically improve initial page load performance.
A Chrome WebGL application showed single‑digit frame rates because pixi.js set failIfMajorPerformanceCaveat to true, and the integrated Intel GPU driver was missing, which was fixed by installing the correct Intel UHD Graphics driver, restoring 60 fps performance.
The article describes how a live‑room video‑gift feature originally built for mobile was ported to a web client by extracting separate color and alpha video streams, compositing them on canvas, then migrating the per‑pixel blending to WebGL shaders, which cut CPU usage dramatically, raise frame rates to about 60 FPS, and outline further optimisations such as pre‑loading, mobile support, and possible MSE or WebAssembly approaches.
This article walks a front‑end beginner through the fundamentals of WebGL, explaining canvas basics, hardware vs software acceleration, and providing a complete Hello World example with HTML, shader code, and JavaScript to render a single red point on a green canvas.
The article explains APNG’s file structure and decoding process, then demonstrates how to render animated PNGs on the web using both Canvas 2D (with drawImage, clearRect, getImageData, putImageData) and WebGL (via multiple textures and custom disposal/blending handling) for efficient, controllable animation playback.
This article chronicles Alipay's five‑year journey in Web3D, detailing the launch of AR red packets, the creation of the R3 rendering engine, subsequent game projects, the rise of Lottie, internal editor development, and strategic predictions for the future of web‑based 3D experiences.
To meet the post‑COVID surge in K‑song live broadcasts, the team replaced high‑latency HLS with low‑latency HTTP‑FLV and built the cross‑platform kg‑player SDK—combining MSE, WASM, and WebGL decoding—to automatically adapt streams, reduce stutter, and support iOS/Android, improving performance and powering hundreds of thousands of daily views.
Paddle.js 1.0, Baidu's web‑oriented deep‑learning library, enables developers to run pretrained Paddle models directly in WebGL‑compatible browsers, offering GPU‑accelerated inference, model conversion tools, multimedia preprocessing, and a collection of ready‑made demos for on‑device AI applications.
This article explores the rapid rise of AI in the frontend ecosystem, compares native and web‑based inference solutions, evaluates frameworks such as TensorFlow JS, ONNX JS, WebNN and the new MNN.js, and shares performance data, code examples, and future directions for cross‑platform AI deployment.
This article walks readers through the fundamentals of WebGL and OpenGL ES, explaining how JavaScript can drive hardware‑accelerated 3D graphics in browsers, covering rendering pipelines, shader basics, and the relationship between GPU, CPU, and modern web development.
Over the past ten years, Baidu’s map web engine has transformed from a server‑rendered tile system to a sophisticated WebGL‑based platform, introducing vector rendering, canvas drawing, line thinning, clipping, WebWorkers, WebAssembly, and advanced interaction features to boost performance, flexibility, and 3D capabilities.
Paddle.js is Baidu’s lightweight JavaScript inference engine that transforms Paddle models into web‑compatible formats, enabling fast, privacy‑preserving AI features such as face detection, gesture recognition and content filtering directly in browsers via WebGL/WebAssembly, with only 201 KB code and broad compatibility.
This article introduces three core 3D volume‑display techniques—triangulation mesh, voxel‑grid, and volume rendering—explaining their principles, advantages, disadvantages, suitable scenarios, and implementation details such as WebGL shaders and instanced drawing for GIS visualisation.
This guide explains how to overcome large‑scale 3D map visualization challenges by using off‑screen rendering, framebuffers, and a step‑by‑step Bloom effect implementation—including bright‑area extraction, Gaussian blur, image merging, and HDR integration—in WebGL.
This article walks through the complete WebGL rendering pipeline, explaining how to create a WebGL context, set up vertex and fragment shaders, load vertex data into buffers, configure viewports and attributes, and finally draw a colored triangle on the canvas using JavaScript.
During Alipay's massive Spring Red Envelope campaign, the frontend team introduced WebGL 3D scenes and particle effects, tackling memory, transmission size, and rendering performance through model reduction, texture compression, GLB packaging, progressive loading, and GPU‑based particle optimizations to achieve stable, low‑latency user experiences.
The article introduces SpriteJS's new 3D extension built on the lightweight OGL library, compares it with popular 3D engines, explains its DOM‑friendly API, and provides extensive code examples for creating cubes, meshes, lighting, shadows, video textures, panoramic scenes, and advanced effects such as render targets and GPGPU, demonstrating high performance and ease of use for front‑end developers.
This article explains how Alibaba’s merchant mini‑program platform integrates Modiface’s AR makeup try‑on engine using JavaScript, MNN and TensorFlow.js, detailing the architecture, real‑time camera handling, inference acceleration, rendering capabilities, and future evolution of AR features for brands.
This article explains how to transform latitude‑longitude geographic coordinates into three‑dimensional spherical coordinates for a three.js globe, covering both manual trigonometric calculations and the library's built‑in THREE.Spherical and THREE.Vector3 utilities with code examples.
Ant Financial’s Oasis 3D engine, a lightweight, component‑based WebGL solution, enables efficient real‑time 3D rendering on browsers and mobile devices, offering features such as scene graphs, PBR support, animation systems, and an online editor that streamlines the entire 3D development workflow.
This article explains how to use WebGL and the Three.js library to create a cross‑platform 3D medal system, covering model format choices, scene setup, rendering code, performance optimizations such as gzip compression, caching, skin switching, and graceful fallback for older devices.
This article details the research, design, and implementation of a high‑efficiency H.265 live‑streaming player on the web using WebAssembly‑compiled FFmpeg, custom I/O, Web Workers, and WebGL rendering to achieve low‑latency, high‑quality playback in modern browsers.
This article explains how to implement high‑efficiency H.265 live‑stream decoding on the web by compiling FFmpeg to WebAssembly, using Web Workers, custom FFmpeg I/O, and WebGL rendering to achieve smooth playback with reasonable CPU and memory usage.
This guide walks you through the core concepts of Three.js, the glTF model format, physics integration with Cannon.js, interaction handling, performance tuning, and a suite of debugging tools, providing practical code snippets and best‑practice tips for building efficient 3D web games.
Alibaba engineers created a two‑week “smile check‑in” system that uses facial recognition and Three.js to turn annual meeting entrances into an interactive 3D “smile planet,” displaying participants’ avatars, nicknames and smile scores in real time while optimizing performance for large‑screen displays.
This tutorial walks through building a dynamic wave animation in WebGL by converting canvas coordinates, generating point vertices with sine functions, using requestAnimationFrame for smooth updates, and customizing point sizes via buffer attributes, providing complete JavaScript code snippets and shader modifications.
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 introduces WebGL as a JavaScript‑OpenGL ES 2.0 hybrid for hardware‑accelerated 3D rendering, explains how to create a WebGL context, write and compile vertex and fragment shaders, handle canvas sizing, and render both square and circular points with detailed code examples.
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.
G3D is a WebGL‑based JavaScript 3D rendering engine created by Alibaba’s terminal team to run in hybrid environments like Weex and React Native, offering core 3D features while addressing the limitations of existing engines such as three.js and Babylon.js.
This article explains why native WebGL line drawing is insufficient for map engines and presents a shader‑based approach that splits lines into triangles, handles custom line widths, line joins, dash patterns, and anti‑aliasing to achieve consistent, high‑quality map rendering.
This tutorial walks through using Three.js to create basic 3D scenes in HTML, covering library inclusion, renderer, scene, camera, object creation, camera positioning and angle adjustments, as well as adding rotation effects and rendering textured objects, with visual demos and code snippets.
The article compares Flash and HTML5, explains Canvas 2D and WebGL rendering modes, and presents performance tests showing WebGL’s superior speed across browsers, while also discussing practical implications for web game development.
This article explores WebGL rendering fundamentals, compares vertex and fragment shader workloads, and presents practical optimization techniques such as moving calculations to shaders, reducing uniform updates, and minimizing program switches to achieve smoother frame rates.
This article explains how Baidu Maps' WebGL engine implements real‑time lighting based on solar position, simulates atmospheric scattering using Rayleigh and Mie models, and renders the Milky Way on a celestial sphere, detailing the calculations, textures, and visual results.
This guide explains how to identify performance bottlenecks in WebGL applications by examining CPU and GPU workloads, using tools such as stats.js, Chrome DevTools, Web Tracing Framework, and offers concrete optimization strategies for shaders, draw calls, state changes, and resource management.
Tmall’s 618 festival showcased cutting‑edge AR, 3D interaction and cross‑screen experiences built on the TidaSDK, Interactive Alliance, Hailuo Dock platform and the Hilo3D engine, illustrating how a unified SDK and optimized web rendering enable immersive e‑commerce innovations.
This article examines how texture dimensions, data formats, and compression techniques influence creation time, memory usage, and rendering performance in WebGL, offering practical guidelines for optimizing texture handling in web graphics applications.
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.
This article explains how to improve WebGL map performance by applying Google’s RAIL model, synchronizing updates with requestAnimationFrame, and using a task scheduler to defer non‑critical work, ensuring smooth frame rates and responsive interactions.
This article explores the architecture of a WebGL‑based map engine, detailing its core rendering pipeline, essential modules such as data handling, shader management, buffers, and event‑driven rendering loops, while highlighting performance considerations and best practices for efficient, on‑demand map visualization.
This article explains how Web Workers can off‑load heavy data processing in WebGL‑based map engines, covering worker creation, data serialization, transferable objects, optimal worker count, and real‑world performance gains, all illustrated with code snippets and diagrams.
This article introduces three.js, explains its relationship to WebGL, outlines what it can achieve, describes core concepts such as coordinate system, camera, scene, renderer, lights, materials, geometry, and particle systems, and provides a step‑by‑step example for building an interactive 3D panorama with camera controls and user interaction.
Safari 10.0 brings comprehensive support for IndexedDB, Shadow DOM, ES6, WebGL, advanced CSS properties, media autoplay, picture‑in‑picture, WebDriver, and native Apple Pay integration, enabling developers to build richer offline‑capable, secure, and high‑performance web applications on macOS and iOS.
This guide explains how to create an interactive 360° panoramic viewer on web pages using Three.js, covering the fundamentals of panoramic images, camera setup, positioning, and rendering techniques to achieve seamless spherical navigation.
The article compares the mature, innovation‑focused US HTML5 ecosystem with China’s still‑hype‑driven market, highlighting differences in developer attitudes toward WebGL, WebSocket, React JS/Native, cross‑platform packaging, and the shift from buzzwords to practical, deep‑tech solutions.
