Revision 927459 of WebGL tutorial

版本网址缩略名： Web/API/WebGL_API/Tutorial
版本标题： WebGL tutorial
版本 id： 927459
创建于： Oct 2, 2015, 12:11:30 PM
创建者： Will.Fan
是否是当前版本？否
评论

标签：

WebGL
教程

修订内容

WebGL 允许网站内容使用基于 OpenGL ES 2.0 的API来演示渲染在HTML{{HTMLElement("canvas")}} 中的3D效果, 支持WebGL的浏览器无需使用任何插件. WebGL 程序由javascript的控制代码和特殊效果代码(shader code) 组成, 这个特殊效果代码是在计算机的图形处理单元(GPU)中执行. WebGL 元素可以和其他HTML元素混合, 并且会和页面的其他部分或页面背景相合成.

此教程讲解如何使用<canvas> 元素来画WebGL 图形, 从基础开始. 提供的例子会让你对WebGL有更清晰的想法, 并且会提供代码片段方便你构建自己的内容.

开始之前

使用 <canvas> 元素并非很困难, 但你需要基本的 HTML 和 JavaScript 知识. <canvas> 元素和 WebGL 不被一些老浏览器所支持, 但在所有新版的主流浏览器中被支持. 为了能在canvas中画图形, 我们使用Javascript的创建动态图形的上下文环境(context)对象.

在本教程中

开始WebGl: 如何设置WebGL上下文环境.
给WebGL的上下文环境添加2D内容: 如何用WebGl渲染简单的平面化图形.
在WebGL中使用材质(shader)去赋予颜色: 演示如何使用材质给图形添加颜色.
用WebGL让对象动起来: 展示如何旋转移动物体来实现简单动画效果.
使用WebGL创建3D物体: 展示如何创建并设置一个3D物体动画 (这里使用立方体).
在WebGL中使用纹理贴图(texture): 展示如何投射纹理贴图到物体的各个面.
WebGL中的灯光: 在WebGL上下文环境中如何模拟灯光效果.
WebGL中的动画纹理贴图: 展示如何让纹理贴图动起来; 在此例中, 会投射一个Ogg格式的视频在一个旋转立方体的各个面上.

修订版来源

<div>{{WebGLSidebar}}</div>

<div class="summary">
<p><a class="external" href="https://www.khronos.org/webgl/" title="https://www.khronos.org/webgl/">WebGL</a> 允许网站内容使用基于&nbsp;<a class="external" href="https://www.khronos.org/opengles/" title="https://www.khronos.org/opengles/">OpenGL&nbsp;ES</a> 2.0 的API来演示渲染在HTML{{HTMLElement("canvas")}} 中的3D效果, 支持WebGL的浏览器无需使用任何插件.&nbsp;WebGL 程序由javascript的控制代码和特殊效果代码(shader code) 组成, 这个特殊效果代码是在计算机的图形处理单元(GPU)中执行. WebGL 元素可以和其他HTML元素混合, 并且会和页面的其他部分或页面背景相合成.</p>
</div>

<p><span class="seoSummary">此教程讲解如何使用<code>&lt;canvas&gt;</code> 元素来画WebGL 图形, 从基础开始. 提供的例子会让你对WebGL有更清晰的想法, 并且会提供代码片段方便你构建自己的内容.</span></p>

<h2 id="开始之前">开始之前</h2>

<p>使用 <code>&lt;canvas&gt;</code> 元素并非很困难, 但你需要基本的&nbsp;<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a>&nbsp;和&nbsp;<a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>&nbsp;知识. &nbsp;<code>&lt;canvas&gt;</code> 元素和&nbsp;WebGL 不被一些老浏览器所支持, 但在所有新版的主流浏览器中被支持. 为了能在canvas中画图形, 我们使用Javascript的创建动态图形的上下文环境(context)对象.</p>

<h2 id="在次教程中">在本教程中</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">开始WebGl</a></dt>
 <dd>如何设置WebGL上下文环境.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">给WebGL的上下文环境添加2D内容</a></dt>
 <dd>如何用WebGl渲染简单的平面化图形.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">在WebGL中使用材质(shader)去赋予颜色</a></dt>
 <dd>演示如何使用材质给图形添加颜色.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">用WebGL让对象动起来</a></dt>
 <dd>展示如何旋转移动物体来实现简单动画效果.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">使用WebGL创建3D物体</a></dt>
 <dd>展示如何创建并设置一个3D物体动画&nbsp;(这里使用立方体).</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">在WebGL中使用纹理贴图(texture)</a></dt>
 <dd>展示如何投射纹理贴图到物体的各个面.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">WebGL中的灯光</a></dt>
 <dd>在WebGL上下文环境中如何模拟灯光效果.</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">WebGL中的动画纹理贴图</a></dt>
 <dd>展示如何让纹理贴图动起来; 在此例中, 会投射一个Ogg格式的视频在一个旋转立方体的各个面上.</dd>
</dl>

恢复到这个版本