BestHub
Sign in
Tagged articles
55 articles
Page 1 of 1
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 graphicsShaderThree.js
0 likes · 19 min read
Build a Galactic Hero Section with Three.js: From Starfield to Shaders
Sohu Tech Products
Sohu Tech Products
Jun 18, 2025 · Mobile Development

How to Recreate iOS 26 Liquid Glass in Flutter: Shaders, SDF, and Real‑Time Effects

This article delves into the technical implementation of iOS 26’s Liquid Glass effect, explaining its physics‑based translucency, adaptive coloring, refraction and fluid deformation, and then shows how to recreate it in Flutter using custom shaders, SDF calculations, lighting models, and the Impeller engine.

FlutterLiquid GlassMobile Development
0 likes · 19 min read
How to Recreate iOS 26 Liquid Glass in Flutter: Shaders, SDF, and Real‑Time Effects
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
Architects' Tech Alliance
Architects' Tech Alliance
Jan 23, 2025 · Game Development

GPU Architecture and Rendering Pipeline Overview

This article provides a comprehensive overview of modern GPU architecture, covering components such as SMs, GPCs, memory hierarchy, unified shader architecture, SIMT execution, warp scheduling, and compares IMR, TBR, and TBDR rendering pipelines while offering practical optimization techniques for developers.

GPUGraphicsRendering
0 likes · 27 min read
GPU Architecture and Rendering Pipeline Overview
Sohu Tech Products
Sohu Tech Products
Dec 11, 2024 · Mobile Development

Master SwiftUI Transitions: From AnyTransition to Custom Visual Effects

This tutorial explores SwiftUI's transition mechanisms—including AnyTransition, the new Transition protocol, visualEffect modifiers, shader‑based effects, color gradients, text rendering, scroll‑based and navigation transitions—providing step‑by‑step code examples and practical guidance for creating impressive UI animations.

AnyTransitionCustomTransitionMobile Development
0 likes · 32 min read
Master SwiftUI Transitions: From AnyTransition to Custom Visual Effects
Sohu Tech Products
Sohu Tech Products
Nov 27, 2024 · Mobile Development

Implementing Particle Snap Effect in Flutter Using Shaders and OverlayPortal

The article shows how to create a Thanos‑style particle snap animation in Flutter by capturing a widget screenshot, inserting an OverlayPortal layer, and applying a custom fragment shader that treats each pixel as a moving, fading particle, with detailed GLSL code and shader loading steps.

FlutterMobileDevelopmentOverlayPortal
0 likes · 22 min read
Implementing Particle Snap Effect in Flutter Using Shaders and OverlayPortal
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 18, 2024 · Mobile Development

Flutter Karaoke-Style Lyric Gradient Animation Tutorial

This article explains how to create a karaoke‑style per‑word gradient highlight for song lyrics in a Flutter app, covering the visual effect analysis, gradient positioning tricks, ShaderMask usage, animation with Tween and AnimationController, per‑character timing, and progress synchronization.

FlutterMobileShader
0 likes · 13 min read
Flutter Karaoke-Style Lyric Gradient Animation Tutorial
Tencent Cloud Developer
Tencent Cloud Developer
Mar 14, 2024 · Mobile Development

Aurora Animation and 3D Penguin Effects in Mobile QQ: Noise Algorithms, Color Mapping, Performance Optimization, and Rendering Techniques

The new QQ 9.0 introduces aurora‑style animations generated by continuous, smoothed noise algorithms with uniform‑probability color mapping, and a spring‑driven 3D penguin rendered via Filament’s PBR materials and GPU compute shaders, achieving sub‑2 ms performance on most Android and iOS devices.

3DGPUMobile
0 likes · 17 min read
Aurora Animation and 3D Penguin Effects in Mobile QQ: Noise Algorithms, Color Mapping, Performance Optimization, and Rendering Techniques
Ximalaya Technology Team
Ximalaya Technology Team
Nov 15, 2023 · Mobile Development

Implementing Gradient Text Effects for Android Live Chat Nicknames

The article explains how to give privileged Android live‑chat users gradient nicknames by applying a LinearGradient shader via a custom GradientColorSpan, handling multi‑line text with restart or continuous strategies, and integrating these spans in a LiveGradientTextView that measures, inflates, and renders the gradient consistently across all live‑room scenarios.

AndroidCustom SpanShader
0 likes · 14 min read
Implementing Gradient Text Effects for Android Live Chat Nicknames
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
Alipay Experience Technology
Alipay Experience Technology
Sep 26, 2023 · Game Development

What’s New in Galacean Engine 1.2? Explore the Latest 2D/3D Features, Editor, and ShaderLab

The Galacean Engine 1.2 milestone introduces a suite of enhancements—including scene asset management, multi‑scene rendering, KTX2 texture compression, a GPU particle renderer, the new ShaderLab language, and a revamped editor panel system—aimed at boosting 2D/3D interactive project development efficiency.

3DEngineGPU particles
0 likes · 13 min read
What’s New in Galacean Engine 1.2? Explore the Latest 2D/3D Features, Editor, and ShaderLab
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.

CanvasGraphicsJavaScript
0 likes · 15 min read
A Simple Introduction to WebGL for Frontend Visualization
Sohu Tech Products
Sohu Tech Products
Mar 29, 2023 · Mobile Development

OpenGLES 2D Lab: Face‑Slimming Photo Editing Demo (Second Edition)

This article presents an iOS OpenGLES 2D experiment that demonstrates a face‑slimming photo‑editing demo, explains the mesh‑grid warping algorithm, shader debugging techniques, perspective and affine transformations, and provides full source code and usage instructions.

Face SlimmingImage ProcessingMobile Development
0 likes · 9 min read
OpenGLES 2D Lab: Face‑Slimming Photo Editing Demo (Second Edition)
Programmer DD
Programmer DD
Mar 5, 2023 · Game Development

Godot 4.0 Release: Major 3D, 2D, and Rendering Overhauls Unveiled

Godot 4.0, the biggest and longest‑developed version of the open‑source game engine, introduces new Vulkan back‑ends, an OpenGL compatibility renderer, advanced global illumination, enhanced 2D tilemap tools, sophisticated shader and post‑processing features, plus extensive updates across scripting, physics, UI, XR, networking, audio and animation.

2D3DGame Engine
0 likes · 10 min read
Godot 4.0 Release: Major 3D, 2D, and Rendering Overhauls Unveiled
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
OPPO Kernel Craftsman
OPPO Kernel Craftsman
Oct 28, 2022 · Artificial Intelligence

ShaderNN: A GPU Shader‑Based Lightweight Inference Engine for Mobile AI Applications

ShaderNN is an open‑source, sub‑2 MB GPU‑shader inference engine that runs TensorFlow, PyTorch and ONNX models directly on mobile graphics textures via OpenGL fragment and compute shaders, delivering real‑time, low‑power AI for image‑heavy tasks while eliminating third‑party dependencies and achieving up to 90 % speed gains.

GPUInference EngineMobile AI
0 likes · 11 min read
ShaderNN: A GPU Shader‑Based Lightweight Inference Engine for Mobile AI Applications
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 17, 2022 · Game Development

Practical Guide to Texture Mapping in OpenGL ES on Android: Passing Bitmap to Native Layer and Rendering

This tutorial explains how to transfer a Bitmap from Java to the native layer using the NDK, retrieve its pixel data with jnigraphics, create and configure an OpenGL texture, set up vertex and fragment shaders with proper texture coordinates, handle Y‑axis flipping on Android, and finally blend multiple textures for advanced rendering effects.

Android NDKMulti-TextureOpenGL ES
0 likes · 20 min read
Practical Guide to Texture Mapping in OpenGL ES on Android: Passing Bitmap to Native Layer and Rendering
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 renderingGPUGraphics
0 likes · 20 min read
Master WebGL & Three.js: From Basics to 3D Rendering in the Browser
Ctrip Technology
Ctrip Technology
Sep 22, 2022 · Mobile Development

Using OpenGL ES for Image Transition Effects in Mobile Video Editing

This article introduces the role of OpenGL ES in mobile video editing, explains why it is preferred over Vulkan, details the rendering pipeline and GLSL shader programming, and provides step‑by‑step Android code for implementing image transition effects and combining multiple transitions.

AndroidOpenGLShader
0 likes · 24 min read
Using OpenGL ES for Image Transition Effects in Mobile Video Editing
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.

GraphicsPolar CoordinatesShader
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 FieldsGeometryProcedural Graphics
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 FieldGraphicsShader
0 likes · 9 min read
Understanding and Implementing Distance Fields in WebGL (Part 2)
Alibaba Terminal Technology
Alibaba Terminal Technology
May 19, 2022 · Mobile Development

How Impeller Redefines Flutter Rendering to Eliminate Shader Jank

Impeller, Flutter’s new rendering backend, tackles shader compilation jank by offline compiling shaders into shader libraries, introducing a modular architecture with compiler, renderer, and entity components, supporting Metal on iOS/macOS, and promising predictable performance, portability, and concurrency while outlining current limitations and future roadmap.

FlutterImpellerShader
0 likes · 15 min read
How Impeller Redefines Flutter Rendering to Eliminate Shader Jank
DaTaobao Tech
DaTaobao Tech
Apr 22, 2022 · Mobile Development

Impeller: Flutter's New Rendering Backend and Offline Shader Compilation

Impeller, Flutter’s new rendering backend, eliminates runtime shader‑compilation jank by offline‑compiling GLSL to SPIR‑V and target APIs such as Metal, generating C++ bindings for fast pipeline state creation, offering predictable performance, portability and concurrency, though currently only the Metal backend is functional and feature support remains incomplete.

FlutterGraphicsImpeller
0 likes · 14 min read
Impeller: Flutter's New Rendering Backend and Offline Shader Compilation
Aotu Lab
Aotu Lab
Mar 24, 2022 · Frontend Development

Mastering WebGL: A Step‑by‑Step Hello World Triangle Tutorial

Learn the four main web drawing tools—HTML + CSS, SVG, Canvas 2D, and WebGL—understand when to choose each, and follow a detailed, code‑rich tutorial that walks through creating a WebGL context, shaders, buffers, and rendering a simple triangle.

HTML5Shader
0 likes · 11 min read
Mastering WebGL: A Step‑by‑Step Hello World Triangle Tutorial
Kuaishou Tech
Kuaishou Tech
Mar 14, 2022 · Game Development

Enhancing Physically Based Rendering with Noise Algorithms: Theory, Implementation, and Visual Examples

This article explains how noise algorithms such as Perlin, FBM, and Worley can complement Physically Based Rendering (PBR) to overcome its limitations, presenting theoretical background, shader implementations, and visual results that demonstrate more realistic and dynamic textures for graphics applications.

Game DevelopmentGraphics RenderingNoise Algorithms
0 likes · 11 min read
Enhancing Physically Based Rendering with Noise Algorithms: Theory, Implementation, and Visual Examples
ByteDance ADFE Team
ByteDance ADFE Team
Feb 9, 2022 · Frontend Development

Fundamentals of 3D Graphics Rendering in Front-End Development

This article introduces the essential concepts and step‑by‑step implementation of 2D and 3D graphics rendering on the web, covering viewport transformation, triangle rasterization, anti‑aliasing, interpolation, camera setup, perspective projection, and depth testing using HTML5 Canvas and JavaScript.

3D renderingGraphicsShader
0 likes · 15 min read
Fundamentals of 3D Graphics Rendering in Front-End Development
Kuaishou Large Model
Kuaishou Large Model
Oct 22, 2021 · Fundamentals

How Noise Powers Real‑Time Short‑Video Effects: Algorithms, Samples & GPU RNG Comparison

This article explains how various noise algorithms—value, gradient, simplex, cellular, and FBM—are applied to short‑video visual effects, showcases shader implementations and image examples, and compares GPU random‑number generators to help developers choose the right balance of performance and visual quality.

GPURandom Number GenerationShader
0 likes · 17 min read
How Noise Powers Real‑Time Short‑Video Effects: Algorithms, Samples & GPU RNG Comparison
Kuaishou Tech
Kuaishou Tech
Jun 28, 2021 · Fundamentals

Mobile IBL Rendering: Split‑Sum Approximation Comparison and Highlight Aliasing Mitigation

This article examines mobile Image‑Based Lighting (IBL) rendering, comparing Split‑Sum Approximation with Substance Painter results, analyzing high‑frequency lighting differences, proposing reflection direction corrections, detailing Prefilter map generation, and presenting solutions for highlight aliasing on mobile GPUs.

IBLPrefilter MapShader
0 likes · 8 min read
Mobile IBL Rendering: Split‑Sum Approximation Comparison and Highlight Aliasing Mitigation
Tencent Cloud Developer
Tencent Cloud Developer
Jun 2, 2021 · Game Development

Shader-Based Image Deformation Effects: Implementation and Principles

The article explains how to implement three common beauty‑camera image deformation effects—twirl, inflate, and pinch—using GLSL shaders, detailing the underlying deformation functions, sampling distance‑field transformations, and smoothstep‑based strength controls, and provides full shader code, animated examples, and resource links.

Distance FieldImage ProcessingShader
0 likes · 9 min read
Shader-Based Image Deformation Effects: Implementation and Principles
Aotu Lab
Aotu Lab
May 27, 2021 · Frontend Development

Why WebGL Beats Canvas for Complex 2D Animations – A Hands‑On Guide

This article explains why WebGL, powered by the GPU, outperforms Canvas for data‑intensive 2D effects, walks through setting up a Three.js environment, and demonstrates basic fragment shaders, uniform usage, and animation techniques with practical code examples.

ShaderThree.js
0 likes · 9 min read
Why WebGL Beats Canvas for Complex 2D Animations – A Hands‑On Guide
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
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
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
Tencent Cloud Developer
Tencent Cloud Developer
Jun 21, 2018 · Mobile Development

Implementing Shift-and-Blend Video Effects with OpenGL Shaders

In this article, Tencent engineer Chang Qing explains the biology‑inspired “Shift‑and‑Blend” video effect—separating RGB channels, scaling and translating each, then alpha‑blending them—while detailing a normalized coordinate system, the required scaling/translation operations, and a high‑performance OpenGL fragment shader implementation for real‑time video processing, with links to demo and source code.

Mobile DevelopmentOpenGLShader
0 likes · 9 min read
Implementing Shift-and-Blend Video Effects with OpenGL Shaders
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
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