Shader | BestHub

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

Mar 31, 2025 · Frontend Development

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

This tutorial walks through building an advanced hero section using Three.js, covering prerequisites, loading and animating a robot model, configuring lighting, creating particle effects, adding UI elements, applying a radial gradient background, implementing parallax interaction, and rendering flowing lines for a polished WebGL experience.

Particle SystemShaderThree.js

0 likes · 21 min read

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

Rare Earth Juejin Tech Community

Mar 22, 2025 · Frontend Development

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

This article walks through recreating Genshin Impact’s Moon scene using Three.js, covering asset extraction, background loading, star field generation with custom shaders, concentric ring creation, axis stars, camera grouping, and performance optimizations, complete with full source code and live demo links.

3D graphicsFrontend TutorialGenshin Impact

0 likes · 10 min read

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

Rare Earth Juejin Tech Community

Mar 9, 2025 · Frontend Development

Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing

This article walks through building an eye‑catching Hero Section using Three.js, custom GLSL shaders, dynamic point lights, and post‑processing effects such as UnrealBloomPass, FilmPass, and a custom ShaderPass, providing complete code snippets and practical tips for front‑end developers.

3dShaderThree.js

0 likes · 12 min read

Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing

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.

GPUOptimizationRendering

0 likes · 27 min read

GPU Architecture and Rendering Pipeline Overview

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.

FlutterGLSLMobileDevelopment

0 likes · 22 min read

Implementing Particle Snap Effect in Flutter Using Shaders and OverlayPortal

Rare Earth Juejin Tech Community

Oct 20, 2024 · Frontend Development

Creating a 3D Cityscape with Lighting, Shadows, and Radar Effects Using Three.js

This tutorial demonstrates how to build a 3D city model in Three.js by adding ambient and directional lighting with shadows, generating random building geometries, customizing shaders for top‑view UV mapping, and implementing animated radar diffusion and scanning effects through shader uniform updates.

JavaScriptShaderThree.js

0 likes · 9 min read

Creating a 3D Cityscape with Lighting, Shadows, and Radar Effects Using Three.js

Rare Earth Juejin Tech Community

Jun 12, 2024 · Frontend Development

Creating a Realistic Rain Effect with Depth Rendering in three.js

This tutorial demonstrates how to create a realistic rain effect in three.js by generating depth maps with an orthographic camera, rendering them to a texture, and using custom shaders to position and fade raindrop meshes based on depth information.

JavaScriptRain EffectShader

0 likes · 13 min read

Creating a Realistic Rain Effect with Depth Rendering in three.js

Rare Earth Juejin Tech Community

May 26, 2024 · Frontend Development

Step‑by‑Step Ocean Simulation with three.js

This tutorial walks readers through building a realistic, animated ocean scene in three.js, covering project initialization, geometry creation, custom shaders, wave calculations, and dynamic boat positioning and rotation using JavaScript and WebGL techniques.

3D graphicsJavaScriptOcean simulation

0 likes · 13 min read

Step‑by‑Step Ocean Simulation with three.js

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.

FlutterShaderanimation

0 likes · 13 min read

Flutter Karaoke-Style Lyric Gradient Animation Tutorial

Rare Earth Juejin Tech Community

May 2, 2024 · Frontend Development

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

This tutorial walks through reproducing the Pepyaka shader effect using Three.js, covering the creation of a central sphere, vertex displacement with GLSL noise, color mapping, spherical particle systems, background firefly particles, animated text, and optional top‑light effects, all with complete source code.

JavaScriptParticle SystemShader

0 likes · 23 min read

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

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.

3dGPUShader

0 likes · 17 min read

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

Rare Earth Juejin Tech Community

Dec 3, 2023 · Frontend Development

Implementing a Particle Effect with GPGPU in three.js

This article explains how to recreate a complex particle animation using three.js by leveraging GPGPU techniques, custom shaders, and compute shaders to efficiently simulate and render hundreds of thousands of particles in real time.

GPGPUJavaScriptParticle System

0 likes · 10 min read

Implementing a Particle Effect with GPGPU in three.js

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

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 developmentInstancedMeshShader

0 likes · 8 min read

Recreating the Genshin Impact Login Screen with Three.js Shaders

Rare Earth Juejin Tech Community

Sep 15, 2023 · Frontend Development

Implementing Realistic Rain Effects on a Map Using Three.js and Custom Shaders

This article explains how to create a realistic, map‑based rain effect with Three.js by designing a 3D particle system, writing custom vertex and fragment shaders, integrating the layer into a map scene, and extending it to support wind and snow effects.

Map IntegrationRain EffectShader

0 likes · 15 min read

Implementing Realistic Rain Effects on a Map Using Three.js and Custom Shaders

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.

JavaScriptShaderWebGL

0 likes · 15 min read

A Simple Introduction to WebGL for Frontend Visualization

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 SlimmingGLSLOpenGLES

0 likes · 9 min read

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

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 animationJavaScriptPost-processing

0 likes · 24 min read

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

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 EngineShader

0 likes · 11 min read

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