WebGL 的例子

WebGL 例子是一系列附有简短的解释的样本用来展示 WebGL 的概念和功能。这些示例根据主题和难度级别进行排序,涵盖 WebGL 渲染上下文,着色器编程,纹理,几何图形,用户交互等。



在第一个程序中,并没有尝试着色着色器,几何图形和使用GPU 内存,这里的示例以渐进的方式探索 WebGL。我们相信它会带来更有效的学习体验,并最终更深入地理解底层概念。



检测 WebGL

这个例子演示如何检测 WebGL 渲染上下文并且反馈给用户。

Clearing with colors

How to clear the rendering context with a solid color.

Clearing by clicking

How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.

Simple color animation

A very basic color animation, done by clearing the WebGL drawing buffer with a different random color every second.

Color masking (en-US)

Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.

Basic scissoring (en-US)

How to draw simple rectangles and squares with scissoring operations.

Canvas size and WebGL

The example explores the effect of setting (or not setting) the canvas size to its element size in CSS pixels, as it appears in the browser window.

Boilerplate 1

The example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier.

Scissor animation

Some animation fun with scissoring and clearing operations.

Raining rectangles (en-US)

A simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.

Shader programming basics

Hello GLSL

A very basic shader program that draws a solid color square.

Hello vertex attributes (en-US)

Combining shader programming and user interaction through vertex attributes.

Textures from code (en-US)

A simple demonstration of procedural texturing with fragment shaders.

Miscellaneous advanced examples

Video textures (en-US)

This example demonstrates how to use video files as textures.