From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/webgl_api/tutorial/index.html | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 files/zh-cn/web/api/webgl_api/tutorial/index.html (limited to 'files/zh-cn/web/api/webgl_api/tutorial/index.html') diff --git a/files/zh-cn/web/api/webgl_api/tutorial/index.html b/files/zh-cn/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..b73235a3d6 --- /dev/null +++ b/files/zh-cn/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,41 @@ +--- +title: WebGL 教程 +slug: Web/API/WebGL_API/Tutorial +tags: + - WebGL + - 教程 + - 概览 +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL 使得网页在支持HTML {{HTMLElement("canvas")}} 标签的浏览器中，不需要使用任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染. WebGL 程序由javascript的控制代码，和在计算机的图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码(shader code，渲染代码) 组成. 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格式的视频在一个旋转立方体的各个面上.
+
-- cgit v1.2.3-54-g00ecf