blob: 3ff18aed61b59f57c65d4026a5e793d788d63e80 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
---
title: WebGL 的例子
slug: Web/API/WebGL_API/By_example
translation_of: Web/API/WebGL_API/By_example
---
<div>{{IncludeSubnav("/en-US/Learn")}}</div>
<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p>
<div id="webgl-by-example">
<div class="summary">
<p>WebGL <em>例子</em>是一系列附有简短的解释的样本用来展示WebGL的概念和功能。这些示例根据主题和难度级别进行排序，涵盖WebGL渲染上下文，着色器编程，纹理，几何图形，用户交互等。</p>
</div>
<div id="webgl-by-example-big-list">
<h2 id="主题例子">主题例子</h2>
<p>这些范例是有浅到深的，它们除了是一个个可以让你实现的例子外，还和主题高度重合，当我们需要在中级和高级阶段实现这个例子时有时我们会重复此例子的基础内容。</p>
<p>在第一个程序中，并没有尝试着色着色器，几何图形和使用{{Glossary("GPU")}} 内存，这里的示例以渐进的方式探索WebGL。我们相信它会带来更有效的学习体验，并最终更深入地理解底层概念。</p>
<p>有关这些例子的解释可以在代码的正文和注释中找到。您应该阅读所有注释，因为更高级的示例不会重复注释以前的代码。</p>
<div>
<h3 id="开始了解渲染上下文">开始了解渲染上下文</h3>
<dl>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Detect_WebGL">检测 WebGL</a></dt>
<dd>这个例子演示如何检测 {{Glossary("WebGL")}} 渲染上下文并且反馈给用户。</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_with_colors">Clearing with colors</a></dt>
<dd>How to clear the rendering context with a solid color.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_by_clicking">Clearing by clicking</a></dt>
<dd>How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Simple_color_animation">Simple color animation</a></dt>
<dd>A very basic color animation, done by clearing the {{Glossary("WebGL")}} drawing buffer with a different random color every second.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Color_masking">Color masking</a></dt>
<dd>Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Basic_scissoring">Basic scissoring</a></dt>
<dd>How to draw simple rectangles and squares with scissoring operations.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Canvas_size_and_WebGL">Canvas size and WebGL</a></dt>
<dd>The example explores the effect of setting (or not setting) the canvas size to its element size in {{Glossary("CSS")}} pixels, as it appears in the browser window.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Boilerplate_1">Boilerplate 1</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Scissor_animation">Scissor animation</a></dt>
<dd>Some animation fun with scissoring and clearing operations.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Raining_rectangles">Raining rectangles</a></dt>
<dd>A simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.</dd>
</dl>
</div>
<div>
<h3 id="Shader_programming_basics">Shader programming basics</h3>
<dl>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_GLSL">Hello GLSL</a></dt>
<dd>A very basic shader program that draws a solid color square.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_vertex_attributes">Hello vertex attributes</a></dt>
<dd>Combining shader programming and user interaction through vertex attributes.</dd>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Textures_from_code">Textures from code</a></dt>
<dd>A simple demonstration of procedural texturing with fragment shaders.</dd>
</dl>
</div>
<div>
<h3 id="Miscellaneous_advanced_examples">Miscellaneous advanced examples</h3>
<dl>
<dt><a href="/en-US/docs/Learn/WebGL/By_example/Video_textures">Video textures</a></dt>
<dd>This example demonstrates how to use video files as textures.</dd>
</dl>
</div>
</div>
</div>
<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p>
|
