Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial below:

WebGL 教程 - Web API

WebGL 使得网页在支持 HTML <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 格式的视频在一个旋转立方体的各个面上。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4