WebGL规范详解：基于OpenGL ES 2.0的HTML5 canvas渲染

WebGL

Specification

需积分: 9 156 浏览量更新于2024-07-16 收藏 513KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"WebGL Specification 1.0.pdf" 是一份详细描述了WebGL 1.0规范的文档，该规范旨在为HTML5 canvas元素提供一个额外的渲染上下文和支持对象。这个渲染上下文允许开发者使用与OpenGL ES 2.0 API高度兼容的接口进行3D图形渲染。 WebGL（Web Graphics Library）是基于OpenGL标准的一个JavaScript绑定，它在浏览器环境中实现了硬件加速的3D图形渲染。这个技术使得开发者无需任何插件即可在网页上创建交互式的3D场景和应用。文档内容包括多个章节，覆盖了WebGL规范的各个方面： 1. 引言部分（1.1）简述了WebGL的目的，即为HTML5 canvas元素添加一个符合OpenGL ES 2.0 API的渲染上下文，从而让开发者能够利用Web平台进行3D图形编程。 2. 规范状态（2.x）指出这是一份编辑草案，可能并非最终版本，提醒读者不要引用此文档作为官方参考。 3. 接下来的部分（3-5.x）详细定义了WebGL的API，包括各种函数、常量、数据类型和接口。例如，4.x章节可能涉及WebGL上下文的创建、配置，以及如何绘制3D几何体；5.x章节可能涵盖了纹理、着色器、缓冲区、帧缓冲、深度测试等核心概念。 5.2.1可能是关于着色语言GLSL（OpenGL Shading Language）的子节，这是编写顶点和片段着色器的关键，这些着色器控制着3D图形的渲染效果。 5.3-5.7可能涵盖更高级的主题，如混合、视口设置、错误处理和性能优化等。 WebGL IDL（Interface Definition Language）链接提供了WebGL接口的详细定义，这对于理解如何在JavaScript中与WebGL API交互至关重要。这份文档由Dean Jackson（Apple Inc.）和Jeff Gilbert（Mozilla Corp.）编辑，版权属于Khronos Group，它是WebGL技术的标准化组织。 "WebGL Specification 1.0.pdf" 是WebGL开发者的宝贵参考资料，它详细阐述了如何在浏览器环境下利用OpenGL ES 2.0 API进行3D图形编程，对于学习和理解WebGL的工作原理及其API有着极其重要的价值。通过学习这份文档，开发者能够创建出丰富的3D web应用和交互式图形内容。

资源详情

资源推荐

2/18/2019 WebGL Speciﬁcation

https://www.khronos.org/registry/webgl/specs/latest/1.0/ 8/44

The following list describes each attribute in the WebGLContextAttributes object and its use. The default value for each attribute is shown

above. The default value is used either if no second parameter is passed to getContext, or if a user object is passed which has no

attribute of the given name.

alpha

If the value is true, the drawing buffer has an alpha channel for the purposes of performing OpenGL destination alpha operations and

compositing with the page. If the value is false, no alpha buffer is available.

depth

If the value is true, the drawing buffer has a depth buffer of at least 16 bits. If the value is false, no depth buffer is available.

stencil

If the value is true, the drawing buffer has a stencil buffer of at least 8 bits. If the value is false, no stencil buffer is available.

antialias

If the value is true and the implementation supports antialiasing the drawing buffer will perform antialiasing using its choice of

technique (multisample/supersample) and quality. If the value is false or the implementation does not support antialiasing, no

antialiasing is performed.

premultipliedAlpha

If the value is true the page compositor will assume the drawing buffer contains colors with premultiplied alpha. If the value is false the

page compositor will assume that colors in the drawing buffer are not premultiplied. This ﬂag is ignored if the alpha ﬂag is false. See

Premultiplied Alpha for more information on the effects of the premultipliedAlpha ﬂag.

preserveDrawingBuffer

If false, once the drawing buffer is presented as described in theDrawing Buffer section, the contents of the drawing buffer are cleared

to their default values. All elements of the drawing buffer (color, depth and stencil) are cleared. If the value is true the buffers will not

be cleared and will preserve their values until cleared or overwritten by the author.

On some hardware setting the preserveDrawingBuffer ﬂag to true can have signiﬁcant performance implications.

powerPreference

Provides a hint to the user agent indicating what conﬁguration of GPU is suitable for this WebGL context. This may inﬂuence which

GPU is used in a system with multiple GPUs. For example, a dual-GPU system might have one GPU that consumes less power at the

expense of rendering performance. Note that this property is only a hint and a WebGL implementation may choose to ignore it.

WebGL implementations use context lost and restored events to regulate power and memory consumption, regardless of the value of

this attribute. At WebGLRenderingContext creation time, this attribute will be ignored if no event listeners exist which would handle

both "webglcontextlost" and "webglcontextrestored" events dispatched to the canvas element.

The allowed values are:

default

Let the user agent decide which GPU conﬁguration is most suitable. This is the default value.

high-performance

Indicates a request for a GPU conﬁguration that prioritizes rendering performance over power consumption. Any content that

chooses this value should be aware that it is more likely that the user agent will force a lost context at any time. Implementations

may decide to initially respect this request and, after some time, lose the context and restore a new context ignoring the request.

Developers are encouraged to only specify this value if they believe it is absolutely necessary, since it may signiﬁcantly decrease

battery life on mobile devices.

low-power

Indicates a request for a GPU conﬁguration that prioritizes power saving over rendering performance. Generally, content should

use this if it is unlikely to be constrained by drawing performance; for example, if it renders only one frame per second, draws only

relatively simple geometry with simple shaders, or uses a small HTML canvas element. Developers are encouraged to use this

value if their content allows, since it may signiﬁcantly improve battery life on mobile devices.

failIfMajorPerformanceCaveat

If the value is true, context creation will fail if the implementation determines that the performance of the created WebGL context

would be dramatically lower than that of a native application making equivalent OpenGL calls. This could happen for a number of

reasons, including:

An implementation might switch to a software rasterizer if the user's GPU driver is known to be unstable.

An implementation might require reading back the framebuffer from GPU memory to system memory before compositing it with

the rest of the page, signiﬁcantly reducing performance.

Applications that don't require high performance should leave this parameter at its default value of false. Applications that require

high performance may set this parameter to true, and if context creation fails then the application may prefer to use a fallback

rendering path such as a 2D canvas context. Alternatively the application can retry WebGL context creation with this parameter set to

false, with the knowledge that a reduced-ﬁdelity rendering mode should be used to improve performance.

Here is an ECMAScript example which passes a WebGLContextAttributes argument to getContext. It assumes the presence of a

canvas element named "canvas1" on the page.

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('webgl',

{ antialias: false,

stencil: true });

Example III

2/18/2019 WebGL Speciﬁcation
https://www.khronos.org/registry/webgl/specs/latest/1.0/ 9/44
5.3 WebGLObject
The WebGLObject interface is the parent interface for all GL objects.
Each WebGLObject has an invalidated ﬂag, which is initially unset.
[Exposed=(Window,Worker)] 
interface WebGLObject { 
};
5.4 WebGLBuffer
The WebGLBuffer interface represents an OpenGL Buffer Object. The underlying object is created as if by calling glGenBuffers (OpenGL ES 2.0
§2.9, man page) , bound as if by calling glBindBuffer (OpenGL ES 2.0 §2.9, man page) and marked for deletion as if by calling glDeleteBuffers (OpenGL ES 2.0 §2.9,
man page) .
[Exposed=(Window,Worker)] 
interface WebGLBuffer : WebGLObject { 
};
5.5 WebGLFramebuffer
The WebGLFramebuffer interface represents an OpenGL Framebuffer Object. The underlying object is created as if by calling
glGenFramebuffers (OpenGL ES 2.0 §4.4.1, man page) , bound as if by calling glBindFramebuffer (OpenGL ES 2.0 §4.4.1, man page) and marked for deletion as if by
calling glDeleteFramebuffers (OpenGL ES 2.0 §4.4.1, man page) .
[Exposed=(Window,Worker)] 
interface WebGLFramebuffer : WebGLObject { 
};
5.6 WebGLProgram
The WebGLProgram interface represents an OpenGL Program Object. The underlying object is created as if by calling glCreateProgram
(OpenGL ES 2.0 §2.10.3, man page) , used as if by calling glUseProgram (OpenGL ES 2.0 §2.10.3, man page) and marked for deletion as if by calling glDeleteProgram
(OpenGL ES 2.0 §2.10.3, man page) .
[Exposed=(Window,Worker)] 
interface WebGLProgram : WebGLObject { 
};
5.7 WebGLRenderbuffer
The WebGLRenderbuffer interface represents an OpenGL Renderbuffer Object. The underlying object is created as if by calling
glGenRenderbuffers (OpenGL ES 2.0 §4.4.3, man page) , bound as if by calling glBindRenderbuffer (OpenGL ES 2.0 §4.4.3, man page) and marked for deletion as if
by calling glDeleteRenderbuffers (OpenGL ES 2.0 §4.4.3, man page) .
[Exposed=(Window,Worker)] 
interface WebGLRenderbuffer : WebGLObject { 
};
5.8 WebGLShader
The WebGLShader interface represents an OpenGL Shader Object. The underlying object is created as if by calling glCreateShader (OpenGL
ES 2.0 §2.10.1, man page) , attached to a Program as if by calling glAttachShader (OpenGL ES 2.0 §2.10.3, man page) and marked for deletion as if by calling
glDeleteShader (OpenGL ES 2.0 §2.10.1, man page) .
[Exposed=(Window,Worker)] 
interface WebGLShader : WebGLObject { 
};
5.9 WebGLTexture
The WebGLTexture interface represents an OpenGL Texture Object. The underlying object is created as if by calling glGenTextures (OpenGL
ES 2.0 §3.7.13, man page) , bound as if by calling glBindTexture (OpenGL ES 2.0 §3.7.13, man page) and marked for deletion as if by calling glDeleteTextures
(OpenGL ES 2.0 §3.7.13, man page) .
[Exposed=(Window,Worker)] 
interface WebGLTexture : WebGLObject { 
};
5.10 WebGLUniformLocation