BestHub
Sign in
Tagged articles
188 articles
Page 2 of 2
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 16, 2022 · Frontend Development

Implementing a 3D Floating Text Effect with React and Three.js

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.

3DGraphicsPostProcessing
0 likes · 17 min read
Implementing a 3D Floating Text Effect with React and Three.js
ByteDance ADFE Team
ByteDance ADFE Team
Mar 7, 2022 · Frontend Development

2D Drawing on the Web: Basics, Techniques, and Performance Optimizations

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.

2d-drawingCanvasSVG
0 likes · 10 min read
2D Drawing on the Web: Basics, Techniques, and Performance Optimizations
IT Xianyu
IT Xianyu
Feb 11, 2022 · Frontend Development

Building a Winter Olympics 3D Web Page with Three.js and React

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.

3D graphicsReactThree.js
0 likes · 19 min read
Building a Winter Olympics 3D Web Page with Three.js and React
Alipay Experience Technology
Alipay Experience Technology
Feb 10, 2022 · Frontend Development

How Ant Group Supercharged Front‑End AI with Cross‑Platform Smart Apps

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

AI inferencePerformance OptimizationWebGL
0 likes · 8 min read
How Ant Group Supercharged Front‑End AI with Cross‑Platform Smart Apps
Sohu Tech Products
Sohu Tech Products
Feb 9, 2022 · Frontend Development

Creating a Winter Olympics 3D Scene with Three.js and React

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.

3D graphicsReactThree.js
0 likes · 18 min read
Creating a Winter Olympics 3D Scene with Three.js and React
Alipay Experience Technology
Alipay Experience Technology
Jan 21, 2022 · Frontend Development

How Reducing Draw Calls Supercharges Web Rendering Performance

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.

Canvas2DFrontend OptimizationWebGL
0 likes · 12 min read
How Reducing Draw Calls Supercharges Web Rendering Performance
Baidu App Technology
Baidu App Technology
Nov 25, 2021 · Game Development

Building an AI-Powered Object Hunt Game with Paddle.js and PaddleClas

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.

AI game developmentMobile AIPaddle.js
0 likes · 9 min read
Building an AI-Powered Object Hunt Game with Paddle.js and PaddleClas
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 19, 2021 · Frontend Development

Creating Meta’s 3D Dynamic Logo with Three.js and Blender

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.

3D ModelingBlenderFBXLoader
0 likes · 16 min read
Creating Meta’s 3D Dynamic Logo with Three.js and Blender
Alipay Experience Technology
Alipay Experience Technology
Oct 13, 2021 · Artificial Intelligence

How ant‑tfjs Boosts Web AI Inference: WebGL, Wasm, and GPU Optimizations

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.

Frontend AIGPU AccelerationTensorFlow.js
0 likes · 11 min read
How ant‑tfjs Boosts Web AI Inference: WebGL, Wasm, and GPU Optimizations
政采云技术
政采云技术
Aug 10, 2021 · Frontend Development

WebGL Concepts and Fundamentals

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.

3D graphics3D web developmentBrowser graphics
0 likes · 17 min read
WebGL Concepts and Fundamentals
58UXD
58UXD
Aug 9, 2021 · Frontend Development

How We Revamped the Linggan VR Website: 5‑Step Process, 3D Animation & Design Secrets

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.

3D animationResponsive DesignVR
0 likes · 11 min read
How We Revamped the Linggan VR Website: 5‑Step Process, 3D Animation & Design Secrets
The Dominant Programmer
The Dominant Programmer
Jul 27, 2021 · Frontend Development

Getting Started with Three.js: Building a Hello World Scene

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.

3D graphicsJavaScriptThree.js
0 likes · 7 min read
Getting Started with Three.js: Building a Hello World Scene
Amap Tech
Amap Tech
Jun 25, 2021 · Frontend Development

Design and Implementation of the Eagle.gl Web 3D Engine for High-Definition Map Rendering

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.

3D renderingGISThree.js
0 likes · 12 min read
Design and Implementation of the Eagle.gl Web 3D Engine for High-Definition Map Rendering
ByteFE
ByteFE
Jun 21, 2021 · Frontend Development

Introduction to Mapbox GL JS

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.

GISMapbox GL JSWebGL
0 likes · 13 min read
Introduction to Mapbox GL JS
Didi Tech
Didi Tech
Jun 11, 2021 · Frontend Development

Design and Implementation of a Real-Time Data Visualization Large Screen Using WebGL and a Custom Map Framework

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.

Data visualizationPerformance OptimizationThree.js
0 likes · 27 min read
Design and Implementation of a Real-Time Data Visualization Large Screen Using WebGL and a Custom Map Framework
ELab Team
ELab Team
May 26, 2021 · Frontend Development

Master WebGL: From Basics to Shaders and Texture Mapping

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.

ShadersWebGLglsl
0 likes · 17 min read
Master WebGL: From Basics to Shaders and Texture Mapping
Youzan Coder
Youzan Coder
May 7, 2021 · Frontend Development

Understanding ArrayBuffer, TypedArray, DataView, and Blob in JavaScript

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.

ArrayBufferBlobDataview
0 likes · 17 min read
Understanding ArrayBuffer, TypedArray, DataView, and Blob in JavaScript
Aotu Lab
Aotu Lab
Apr 27, 2021 · Fundamentals

Inside SpaceX’s Frontend Architecture and the Latest in Flutter, GitHub & AI

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.

WebGLfrontendharmony os
0 likes · 9 min read
Inside SpaceX’s Frontend Architecture and the Latest in Flutter, GitHub & AI
Taobao Frontend Technology
Taobao Frontend Technology
Apr 27, 2021 · Game Development

How Alibaba’s Taobao Life Renders Real‑Time Virtual Avatars with Web Tech

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.

3D graphicsARWebGL
0 likes · 27 min read
How Alibaba’s Taobao Life Renders Real‑Time Virtual Avatars with Web Tech
vivo Internet Technology
vivo Internet Technology
Apr 7, 2021 · Frontend Development

3D Data Visualization in Front-end Development: From Concept to Practice

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.

3D rendering3d-visualizationData visualization
0 likes · 15 min read
3D Data Visualization in Front-end Development: From Concept to Practice
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 29, 2021 · Frontend Development

How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum

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.

360 panoramaThree.jsWebGL
0 likes · 13 min read
How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum
ByteFE
ByteFE
Mar 10, 2021 · Frontend Development

Implementing a Twisted Gallery Effect with Three.js and WebGL

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.

PostProcessingShaderThree.js
0 likes · 12 min read
Implementing a Twisted Gallery Effect with Three.js and WebGL
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 7, 2021 · Game Development

What Makes Oasis Engine a Cutting‑Edge Web 3D Game Engine?

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.

3D EngineComponent SystemTypeScript
0 likes · 13 min read
What Makes Oasis Engine a Cutting‑Edge Web 3D Game Engine?
AntTech
AntTech
Feb 4, 2021 · Game Development

Overview of Oasis Engine: Architecture, Features, Performance, and Future Roadmap

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.

3D EngineComponent ArchitectureOasis Engine
0 likes · 14 min read
Overview of Oasis Engine: Architecture, Features, Performance, and Future Roadmap
Amap Tech
Amap Tech
Feb 1, 2021 · Frontend Development

Realistic Lighting Rendering for 3D Building Elements in AMap JSAPI 2.0

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.

3D renderingBlinn-PhongMAP
0 likes · 11 min read
Realistic Lighting Rendering for 3D Building Elements in AMap JSAPI 2.0
iQIYI Technical Product Team
iQIYI Technical Product Team
Dec 25, 2020 · Frontend Development

Optimizing Live Streaming Gift Animations: Formats, Performance, and Implementation on Qixiu PC Web

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.

APNGAnimation FormatsCanvas
0 likes · 12 min read
Optimizing Live Streaming Gift Animations: Formats, Performance, and Implementation on Qixiu PC Web
360 Tech Engineering
360 Tech Engineering
Oct 30, 2020 · Frontend Development

Building an Interactive 3D Globe with Three.js, GLSL Shaders, and Clickable Countries

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.

Data visualizationInteractive GlobeShader Programming
0 likes · 19 min read
Building an Interactive 3D Globe with Three.js, GLSL Shaders, and Clickable Countries
vivo Internet Technology
vivo Internet Technology
Oct 20, 2020 · Frontend Development

Mastering H5 Animations: From GIFs to WebGL and Game Engines

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.

Game enginesH5 AnimationLottie
0 likes · 11 min read
Mastering H5 Animations: From GIFs to WebGL and Game Engines
Aotu Lab
Aotu Lab
Sep 22, 2020 · Frontend Development

Exploring Vue 3: New Features, Teleport, and Vue‑Lit Web Components

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.

TaroTeleportVue 3
0 likes · 6 min read
Exploring Vue 3: New Features, Teleport, and Vue‑Lit Web Components
WecTeam
WecTeam
Sep 11, 2020 · Frontend Development

Simulate Life with WebGL and Speed Up Pages Using CSS content-visibility

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.

Content-VisibilityConway's Game of LifeGPU Acceleration
0 likes · 2 min read
Simulate Life with WebGL and Speed Up Pages Using CSS content-visibility
Tencent Music Tech Team
Tencent Music Tech Team
Aug 14, 2020 · Frontend Development

Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL

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.

CanvasPerformance OptimizationWebGL
0 likes · 9 min read
Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 6, 2020 · Frontend Development

APNG Animation Implementation: Canvas 2D and WebGL Rendering

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.

APNGCanvas 2DJavaScript
0 likes · 12 min read
APNG Animation Implementation: Canvas 2D and WebGL Rendering
Tencent Music Tech Team
Tencent Music Tech Team
Jul 7, 2020 · Frontend Development

Technical Overview of HLS and HTTP-FLV Live Streaming for K歌 Web Frontend

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.

HTTP-FLVSDKWasm
0 likes · 14 min read
Technical Overview of HLS and HTTP-FLV Live Streaming for K歌 Web Frontend
Laravel Tech Community
Laravel Tech Community
Jul 6, 2020 · Artificial Intelligence

Paddle.js 1.0 Released: Browser‑Based Deep Learning Framework

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.

Browser InferenceDeep LearningPaddle.js
0 likes · 3 min read
Paddle.js 1.0 Released: Browser‑Based Deep Learning Framework
Taobao Frontend Technology
Taobao Frontend Technology
Jun 28, 2020 · Frontend Development

How Frontend AI Is Evolving: From WebGL to MNN.js

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.

AIMNN.jsWebAssembly
0 likes · 11 min read
How Frontend AI Is Evolving: From WebGL to MNN.js
Taobao Frontend Technology
Taobao Frontend Technology
Jun 12, 2020 · Frontend Development

Unlocking WebGL: From JavaScript to 3D Graphics Mastery

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.

OpenGL ESShaderWebGL
0 likes · 17 min read
Unlocking WebGL: From JavaScript to 3D Graphics Mastery
Baidu Maps Tech Team
Baidu Maps Tech Team
May 29, 2020 · Frontend Development

How Baidu’s Web Map Engine Evolved Over a Decade: From Tiles to WebGL

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.

Baidu MapsCanvasPerformance Optimization
0 likes · 10 min read
How Baidu’s Web Map Engine Evolved Over a Decade: From Tiles to WebGL
Baidu App Technology
Baidu App Technology
May 20, 2020 · Frontend Development

Paddle.js: Baidu's Browser-Based AI Inference Engine for Frontend Development

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.

Frontend IntelligenceJavaScript AINeural Network Inference
0 likes · 13 min read
Paddle.js: Baidu's Browser-Based AI Inference Engine for Frontend Development
Baidu Maps Tech Team
Baidu Maps Tech Team
Apr 22, 2020 · Frontend Development

Mastering WebGL Bloom: From Framebuffers to HDR Post‑Processing

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.

BloomFramebufferGraphics
0 likes · 8 min read
Mastering WebGL Bloom: From Framebuffers to HDR Post‑Processing
360 Tech Engineering
360 Tech Engineering
Apr 16, 2020 · Frontend Development

Step‑by‑Step Guide to Rendering a Triangle with 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.

GraphicsRenderingShader
0 likes · 14 min read
Step‑by‑Step Guide to Rendering a Triangle with WebGL
AntTech
AntTech
Apr 3, 2020 · Frontend Development

Optimizing 3D WebGL Performance for Alipay's Spring Red Envelope Project

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.

3D graphicsParticle SystemsPerformance Optimization
0 likes · 19 min read
Optimizing 3D WebGL Performance for Alipay's Spring Red Envelope Project
360 Tech Engineering
360 Tech Engineering
Feb 26, 2020 · Frontend Development

SpriteJS 3D Extension: Rendering Capabilities and Practical Examples

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.

3D renderingSpriteJSWebGL
0 likes · 9 min read
SpriteJS 3D Extension: Rendering Capabilities and Practical Examples
360 Tech Engineering
360 Tech Engineering
Sep 23, 2019 · Frontend Development

Converting Geographic Coordinates to 3D Positions in three.js

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.

Three.jsWebGLcoordinate conversion
0 likes · 5 min read
Converting Geographic Coordinates to 3D Positions in three.js
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 10, 2019 · Frontend Development

How Ant Financial’s Oasis 3D Engine Powers Web‑Based 3D Experiences

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.

3D renderingOasis 3DWebGL
0 likes · 15 min read
How Ant Financial’s Oasis 3D Engine Powers Web‑Based 3D Experiences
NetEase Media Technology Team
NetEase Media Technology Team
Aug 21, 2019 · Frontend Development

How to Build a 3D Medal System with WebGL and Three.js

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.

3D renderingMedal systemPerformance Optimization
0 likes · 10 min read
How to Build a 3D Medal System with WebGL and Three.js
Aotu Lab
Aotu Lab
Oct 30, 2018 · Game Development

Mastering 3D Web Games: Three.js, glTF, and Cannon.js Essentials

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.

3D Game DevelopmentCannon.jsPerformance Optimization
0 likes · 22 min read
Mastering 3D Web Games: Three.js, glTF, and Cannon.js Essentials
Alibaba Cloud Developer
Alibaba Cloud Developer
Jun 21, 2018 · Frontend Development

Turning an Annual Meeting into a Live 3D Smiling Planet: Alibaba’s Face‑Check‑In System

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.

H5 AnimationPerformance OptimizationThree.js
0 likes · 11 min read
Turning an Annual Meeting into a Live 3D Smiling Planet: Alibaba’s Face‑Check‑In System
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Creating Animated Wave Effects with WebGL and requestAnimationFrame

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.

ShaderWebGLanimation
0 likes · 9 min read
Creating Animated Wave Effects with WebGL and requestAnimationFrame
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Dynamic Control of WebGL Shaders: Attributes, Uniforms, and Buffer Objects

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.

ShadersWebGLbuffer
0 likes · 11 min read
Dynamic Control of WebGL Shaders: Attributes, Uniforms, and Buffer Objects
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Getting Started with WebGL: Drawing a Point Using Shaders

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.

3DCanvasShaders
0 likes · 9 min read
Getting Started with WebGL: Drawing a Point Using Shaders
Taobao Frontend Technology
Taobao Frontend Technology
May 16, 2018 · Frontend Development

How Shaders Can Shrink, Beautify, and Speed Up Your Web Pages – A WebGL Tutorial

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.

Frontend OptimizationShaderWebGL
0 likes · 20 min read
How Shaders Can Shrink, Beautify, and Speed Up Your Web Pages – A WebGL Tutorial
JD Tech
JD Tech
Apr 13, 2018 · Frontend Development

Using WebGL for General‑Purpose GPU Computation in the Browser

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.

GPGPUGPUWebGL
0 likes · 8 min read
Using WebGL for General‑Purpose GPU Computation in the Browser
Aotu Lab
Aotu Lab
Jul 28, 2017 · Frontend Development

Why WebGL Outperforms Canvas 2D in HTML5 Game Rendering

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.

Canvas2DGame DevelopmentHTML5
0 likes · 12 min read
Why WebGL Outperforms Canvas 2D in HTML5 Game Rendering
Baidu Maps Tech Team
Baidu Maps Tech Team
Jun 29, 2017 · Frontend Development

How to Diagnose and Optimize WebGL Performance: Practical Tips and Tools

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.

Chrome DevToolsGPUGraphics
0 likes · 9 min read
How to Diagnose and Optimize WebGL Performance: Practical Tips and Tools
Alibaba Cloud Developer
Alibaba Cloud Developer
Jun 28, 2017 · Frontend Development

How Tmall’s TidaSDK and Hilo3D Power the 618 AR Experience

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.

3D renderingARE‑commerce
0 likes · 8 min read
How Tmall’s TidaSDK and Hilo3D Power the 618 AR Experience
Baidu Maps Tech Team
Baidu Maps Tech Team
Jun 2, 2017 · Frontend Development

How Texture Size, Format, and Compression Affect WebGL Performance

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.

WebGLcompressiontexture performance
0 likes · 10 min read
How Texture Size, Format, and Compression Affect WebGL Performance
Baidu Maps Tech Team
Baidu Maps Tech Team
May 26, 2017 · Frontend Development

How to Solve Matrix and Z‑Buffer Precision Loss in WebGL Maps

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.

WebGLdepth bufferglsl
0 likes · 9 min read
How to Solve Matrix and Z‑Buffer Precision Loss in WebGL Maps
Baidu Maps Tech Team
Baidu Maps Tech Team
May 5, 2017 · Frontend Development

Designing a High‑Performance WebGL Map Engine: Architecture & Rendering Core

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.

RenderingWebGLfrontend
0 likes · 7 min read
Designing a High‑Performance WebGL Map Engine: Architecture & Rendering Core
Baidu Maps Tech Team
Baidu Maps Tech Team
Apr 20, 2017 · Frontend Development

Boost Map Rendering Performance with Web Workers: A Practical Guide

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.

JavaScriptPerformance OptimizationWeb Worker
0 likes · 9 min read
Boost Map Rendering Performance with Web Workers: A Practical Guide
Qunar Tech Salon
Qunar Tech Salon
Jan 6, 2017 · Frontend Development

Introduction to three.js: Concepts, Capabilities, and Basic Usage

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.

3DGraphicsThree.js
0 likes · 12 min read
Introduction to three.js: Concepts, Capabilities, and Basic Usage
Aotu Lab
Aotu Lab
Jun 14, 2016 · Frontend Development

Safari 10.0: Full‑Stack Web API and Front‑End Feature Guide

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.

IndexedDBSafariShadow DOM
0 likes · 12 min read
Safari 10.0: Full‑Stack Web API and Front‑End Feature Guide
Aotu Lab
Aotu Lab
Jan 6, 2016 · Frontend Development

Build a 360° Panorama Viewer in the Browser with Three.js

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.

3DJavaScriptThree.js
0 likes · 5 min read
Build a 360° Panorama Viewer in the Browser with Three.js
ITPUB
ITPUB
Nov 18, 2015 · Frontend Development

Why Do US and China HTML5 Front‑End Markets Evolve So Differently?

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.

HTML5Market analysisReact Native
0 likes · 8 min read
Why Do US and China HTML5 Front‑End Markets Evolve So Differently?