Tagged articles

23 articles

Page 1 of 1

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

Rare Earth Juejin Tech Community

Jul 9, 2025 · Frontend Development

Create a Red Screen with GLSL: A Simple Four‑Line Fragment Shader Tutorial

This article walks through the fundamentals of GLSL fragment shaders, comparing them to Canvas 2D drawing, explaining gl_FragColor, and providing step‑by‑step code examples for solid colors, linear and radial gradients, glowing rings, and diagonal line effects, all illustrated with images.

Fragment ShaderShader TutorialWebGL

0 likes · 10 min read

Create a Red Screen with GLSL: A Simple Four‑Line Fragment Shader Tutorial

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

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.

PostProcessingShadersThree.js

0 likes · 18 min read

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

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 renderingOpenGLThree.js

0 likes · 11 min read

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

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)

Rare Earth Juejin Tech Community

Oct 8, 2022 · Game Development

Understanding Texture Mapping in OpenGL ES: Concepts, Coordinates, Wrapping, Filtering, and Units

This article explains the fundamentals of texture mapping in OpenGL ES, covering texture objects, mapping theory, texture coordinates, wrapping modes, filtering techniques, texture units, and provides practical guidance for implementing these concepts in graphics applications.

OpenGLRenderingglsl

0 likes · 15 min read

Understanding Texture Mapping in OpenGL ES: Concepts, Coordinates, Wrapping, Filtering, and Units

Rare Earth Juejin Tech Community

Sep 27, 2022 · Frontend Development

Understanding Shaders in WebGL1: Vertex and Fragment Shaders, GLSL Syntax, and Cube Rendering

This article provides a comprehensive guide to WebGL1 shaders, explaining the roles of vertex and fragment shaders, GLSL syntax, storage qualifiers, precision, control structures, and demonstrates rendering a 3D cube with indexed drawing and reusable utility functions.

Fragment ShaderShadersVertex Shader

0 likes · 21 min read

Understanding Shaders in WebGL1: Vertex and Fragment Shaders, GLSL Syntax, and Cube Rendering

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

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 ShadersShader ProgrammingWebGL

0 likes · 7 min read

Understanding WebGL from Scratch: Color Manipulation and Shader Techniques

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

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

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)

ByteFE

May 25, 2022 · Frontend Development

Understanding WebGL from Scratch: Fragment Shaders, Shape Drawing, and Distance Field Composition

This tutorial explores WebGL fragment shaders by demonstrating how to draw basic shapes and lines using step and smoothstep functions, while introducing anti-aliasing techniques and distance field composition methods for precise GPU-based rendering.

Distance FieldsFragment ShadersGPU rendering

0 likes · 6 min read

Understanding WebGL from Scratch: Fragment Shaders, Shape Drawing, and Distance Field Composition

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

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

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

Sohu Tech Products

Nov 20, 2019 · Mobile Development

Implementing a Generalized Split‑Screen Filter with GLSL Fragment Shaders

This article demonstrates how to create a universal GLSL fragment shader that produces static and delayed dynamic split‑screen effects—similar to TikTok filters—by manipulating texture coordinates, handling arbitrary screen counts, and integrating multiple textures within the iOS GPUImage framework.

Fragment ShaderGPUImageMobile Development

0 likes · 9 min read

Implementing a Generalized Split‑Screen Filter with GLSL Fragment Shaders

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

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

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

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

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