WebGL 1.0 API快速参考指南

3星 · 超过75%的资源需积分: 10 36 浏览量更新于2024-09-07 收藏 495KB PDF 举报

"WebGL1.0API快速参考卡片" WebGL是一种软件接口，它允许开发者在Web浏览器中直接访问图形硬件，从而创建高质量的3D图像。基于OpenGL ES 2.0规范，WebGL提供了丰富的功能，使得程序员可以定义渲染3D物体所需的对象和操作。这个技术特别适用于网页中的交互式三维图形显示。以下是一些核心的WebGL函数和方法，这些都在WebGL1.0的API中： 1. 整体帧缓冲操作（Whole Framebuffer Operations）： - `clear(ulong mask)`: 清除指定的缓冲区，mask可以是COLOR_BUFFER_BIT, DEPTH_BUFFER_BIT或STENCIL_BUFFER_BIT的位运算组合。 - `clearColor(float red, float green, float blue, float alpha)`: 设置清除颜色，参数分别为红色、绿色、蓝色和透明度，范围0到1。 - `clearDepth(float depth)`: 设置深度缓冲区的清除值，深度值被限制在0到1之间。 - `clearStencil(int s)`: 设置模板缓冲区的清除值。 - `colorMask(bool red, bool green, bool blue, bool alpha)`: 控制颜色缓冲区的写入，根据参数设置各通道是否允许写入。 - `depthMask(bool flag)`: 控制深度缓冲区的写入，flag为真则允许写入，假则禁止。 - `stencilMask(uint mask)`: 设置模板缓冲区的写入掩码。 - `stencilMaskSeparate(enum face, uint mask)`: 对于指定的面（FRONT, BACK, 或 FRONT_AND_BACK），设置模板缓冲区的写入掩码。 2. WebGL函数调用行为与OpenGL ES 2.0保持一致，但有些紫色标记的内容在OpenGL ES中没有对应的功能。对于完整的WebGL1.0规范，可以在www.khronos.org/webgl找到；而OpenGLES2.0的规范可以在www.khronos.org/registry/gles查阅。 WebGL的这些函数和方法是实现3D图形渲染的基础。例如，`clear()`函数用于清除帧缓冲区的内容，`clearColor()`可以设定画面的初始颜色，`clearDepth()`和`clearStencil()`则分别处理深度和模板缓冲区的清除。颜色和深度掩码控制了像素的混合和深度测试，而模板操作则涉及到多边形边缘的处理和其他高级效果。使用WebGL，开发者能够创建复杂的3D场景，实现光照、纹理映射、动画以及其他图形特效，这一切都无需离开浏览器环境。这对于网页游戏、数据可视化、虚拟现实应用等具有重大意义，因为它让3D图形技术变得更为普及和易用。

WebGL 1.0 API Quick Reference Card - Page 1

Whole Framebuer Operaons

[5.13.3]

void clear(ulong mask)

[5.13.11]

mask:

Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT

void clearColor(

oat

red,

oat

green,

oat

blue,

oat

alpha)

void clearDepth(

oat

depth)

depth:

Clamped to the range 0 to 1.

void clearStencil(int s)

void colorMask(bool red, bool green, bool blue, bool alpha)

void depthMask(bool ag)

void stencilMask(uint mask)

void stencilMaskSeparate(enum face, uint mask)

face:

FRONT, BACK, FRONT_AND_BACK

WebGL

is a soware interface for accessing graphics hardware

from within a web browser. Based on OpenGL ES 2.0, WebGL allows a

programmer to specify the objects and operaons involved in producing

high-quality graphical images, specically color images of 3D objects.

• [n.n.n] refers to secons in the WebGL 1.0 specicaon, available at

www.khronos.org/webgl

• Content marked in purple does not have a corresponding funcon in

OpenGL ES. The OpenGL ES 2.0 specicaon is available at

www.khronos.org/registry/gles

WebGL funcon calls behave idencally to their OpenGL ES counterparts

unless otherwise noted.

ArrayBuer and Typed Arrays

[5.12]

Data is transferred to WebGL using ArrayBuer and views.

Buers represent unstructured binary data, which can be

modied using one or more typed array views.

Buers

ArrayBuer(ulong byteLength)

ulong byteLength: read-only, length of view in bytes.

Creates a new buer. To modify the data, create one or more

views referencing it.

Views

In the following, ViewType may be Int8Array, Int16Array,

Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array.

ViewType(ulong length)

Creates a view and a new underlying buer.

ulong length: Read-only, number of elements in this view.

ViewType(ViewType other)

Creates new underlying buer and copies ‘other’ array.

ViewType(type[] other)

Creates new underlying buer and copies ‘other’ array.

ViewType(ArrayBuer buer, [oponal] ulong byteOset,

[oponal] ulong length)

Create a new view of given buer, starng at oponal byte

oset, extending for oponal length elements.

ArrayBuer buer: Read-only, buer backing this view

ulong byteOset: Read-only, byte oset of view start in buer

ulong length: Read-only, number of elements in this view

Other Properes

ulong byteLength: Read-only, length of view in bytes.

const ulong BYTES_PER_ELEMENT: element size in bytes.

Methods

view[i] = get/set element i

et(ViewType other, [oponal] ulong oset)

t(type[] other, [oponal] ulong oset)

Replace elements in this view with those from other, starng

at oponal oset.

ViewType subset(long begin, [oponal] long end)

Return a subset of this view, referencing the same underlying

buer.

The WebGL Context and getContext() [2.5]

This object manages OpenGL state

and renders to the a drawing buer,

which must is also be created at the

same me of as the context creaon.

Create the

WebGLRenderingContext

object and drawing buer by calling

the getContext method of a given

HTMLCanvasElement

object with the

exact string ‘webgl’. The drawing buer

is also created by getContext.

For example:

<!DOCTYPE html>

var canvas = document.getElementById(“c”);

var gl = canvas.getContext(“webgl”);

gl.clearColor(1.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

</script>

</body></html>

WebGLObject [5.3]

This is the parent interface for all WebGL resource objects.

Resource interface objects:

WebGLBuer [5.4] OpenGL Buer Object.

WebGLProgram [5.6] OpenGL Program Object.

WebGLRenderbuer [5.7] OpenGL Renderbuer Object.

WebGLShader [5.8] OpenGL Shader Object.

WebGLTexture [5.9] OpenGL Texture Object.

WebGLUniformLocaon [5.10] Locaon of a uniform variable in a

shader program.

WebGLAcveInfo [5.11] Informaon returned from calls to

getAcveArib and getAcveUniform.

Has the following read-only

properes: name, locaon, size, type.

WebGLRenderingContext

[5.13]

This is the prinicpal interface in WebGL. The funcons listed on

this reference card are available within this interface.

Aributes:

canvas Type: HTMLCanvasElement

A reference to the canvas element which created this context.

drawingBuerWidth Type: GLsizei

The actual width of the drawing buer, which may dier from the

width aribute of the HTMLCanvasElement if the implementaon is

unable to sasfy the requested width or height.

drawingBuerHeight Type: GLsizei

The actual height of the drawing buer, which may dier from the

height aribute of the HTMLCanvasElement if the implementaon is

unable to sasfy the requested width or height

Interfaces

Interfaces are oponal requests and may be ignored by an

implementaon. See getContextAributes for actual values.

WebGLContextAributes

[5.2]

This interface contains requested drawing surface aributes

and is passed as the second parameter to getContext.

Aributes:

alpha Default: true

If true, requests a drawing buer with an alpha channel for the

purposes of performing OpenGL desnaon alpha operaons

and composing with the page.

depth

fault: true

If true, requests drawing buer with a depth buer of at least

16 bits.

stencil Default: false

If true, requests a stencil buer of at least 8 bits.

analias

fault: true

If true, requests drawing buer with analiasing using its choice

of technique (mulsample/supersample) and quality.

premulpliedAlpha Default: true

If true, requests drawing buer which contains colors with

premulplied alpha. (Ignored if Alpha is false.)

preserveDrawingBuer

fault: false

If true, requests that contents of the drawing buer remain in

between frames, at potenal performance cost.

View and Clip

[5.13.3 - 5.13.4]

The viewport species the ane transformaon of x

and y from normalized device coordinates to window

coordinates. Drawing buer size is determined by the

HTMLCanvasElement.

void depthRange(oat zNear, oat zFar)

zNear: Clamped to the range 0 to 1 Must be <= zFar

zFar: Clamped to the range 0 to 1.

void scissor(int x, int y, long width, long height)

void viewport(int x, int y, long width, long height)

Per-Fragment Operaons

[5.13.3]

void

blendColor(oat red, oat green, oat blue, oat alpha)

void blendEquaon(enum mode)

mode: See modeRGB for blendEquaonSeparate

void blendEquaonSeparate(enum modeRGB,

enum modeAlpha)

modeRGB, and modeAlpha: FUNC_ADD, FUNC_SUBTRACT,

FUNC_REVERSE_SUBTRACT

void blendFunc(enum sfactor, enum dfactor)

sfactor: Same as for dfactor, plus SRC_ALPHA_SATURATE

dfactor: ZERO, ONE, [ONE_MINUS_]SRC_COLOR,

[ONE_MINUS_]DST_COLOR, [ONE_MINUS_]SRC_ALPHA,

[ONE_MINUS_]DST_ALPHA, [ONE_MINUS_]CONSTANT_COLOR,

[ONE_MINUS_]CONSTANT_ALPHA

Note: Src and dst factors may not both reference constant color

void blendFuncSeparate(enum srcRGB, enum dstRGB,

enum srcAlpha, enum dstAlpha)

srcRGB, srcAlpha: See sfactor for blendFunc

dstRGB, dstAlpha: See dfactor for blendFunc

Note: Src and dst factors may not both reference constant color

void depthFunc(enum func)

func: NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER,

GEQUAL, NOTEQUAL

void sampleCoverage(oat value, bool invert)

void stencilFunc(enum func, int ref, uint mask)

func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER,

GEQUAL

void stencilFuncSeparate(enum face, enum func, int ref,

uint mask)

face: FRONT, BACK, FRONT_AND_BACK

func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER,

GEQUAL

void stencilOp(enum fail, enum zfail, enum zpass)

fail, zfail, and zpass: KEEP, ZERO, REPLACE, INCR, DECR, INVERT,

INCR_WRAP, DECR_WRAP

void

stencilOpSeparate(enum face, enum fail, enum zfail,

enum zpass)

face: FRONT, BACK, FRONT_AND_BACK

fail, zfail, and zpass: See fail, zfail, and zpass for stencilOp

Buer Objects

[5.13.5]

Once bound, buers may not be rebound with a dierent Target.

void bindBuer(enum target, Object buer)

target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

void buerData(enum target, long size, enum usage)

target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

usage: STATIC_DRAW, STREAM_DRAW, DYNAMIC_DRAW

void buerData(enum target, Object data, enum usage)

target and usage: Same as for buerData above

void buerSubData(enum target, long oset, Object data)

target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

Object createBuer()

Note: Corresponding OpenGL ES funcon is GenBuers

void deleteBuer(Object buer)

any getBuerParameter(enum target, enum pname)

target: ARRAY_BUFFER, ELEMENT_ ARRAY_BUFFER

pname: BUFFER_SIZE, BUFFER_USAGE

bool isBuer(Object buer)

Detect and Enable Extensions [5.13.14]

string[ ] getSupportedExtensions()

object getExtension(string name)

Rasterizaon

[5.13.3]

void cullFace(enum mode)

mode: BACK, FRONT_AND_BACK,

FRONT

void frontFace(enum mode)

mode: CCW, CW

void lineWidth(oat width)

void polygonOset(oat factor,

oat units)

Detect context lost events [5.13.13]

bool isContextLost()

下载后可阅读完整内容，剩余3页未读，立即下载

X01动力装甲

粉丝: 2191
资源: 10

WebGL 1.0 API快速参考指南

最新资源