Tag

Shaders

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 30, 2024 · Frontend Development

Three.js Wind Turbine IoT Visualization with Shaders, Animations, and Bloom Effects

This article demonstrates how to build a Three.js‑based wind turbine IoT visualization system, covering the tech stack, shader creation, clipping and tween animations, material handling, custom Bézier curves, gear animations, and bloom lighting effects, with full source code examples.

ShadersThree.jsTween
0 likes · 12 min read
Three.js Wind Turbine IoT Visualization with Shaders, Animations, and Bloom Effects
Rare Earth Juejin Tech Community
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.

GLSLShadersThree.js
0 likes · 18 min read
Recreating the Xiaomi SU7 Showcase Webpage with three.js and Custom Shaders
Rare Earth Juejin Tech Community
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 ShaderGLSLGraphics Programming
0 likes · 21 min read
Understanding Shaders in WebGL1: Vertex and Fragment Shaders, GLSL Syntax, and Cube Rendering
ByteFE
ByteFE
May 18, 2022 · Frontend Development

Understanding WebGL: GPU Basics, Shaders, and Practical Code Examples

This article introduces WebGL fundamentals for frontend developers, explaining GPU versus CPU, GLSL shaders, and how JavaScript prepares data, followed by step‑by‑step code examples of fragment and vertex shaders, custom primitives, and using the gl‑renderer library to render graphics.

GPUJavaScriptShaders
0 likes · 11 min read
Understanding WebGL: GPU Basics, Shaders, and Practical Code Examples
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.

3DJavaScriptShaders
0 likes · 9 min read
Getting Started with WebGL: Drawing a Point Using Shaders
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.

BufferGLSLJavaScript
0 likes · 11 min read
Dynamic Control of WebGL Shaders: Attributes, Uniforms, and Buffer Objects