From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../webglrenderingcontext/activetexture/index.html | 127 +++ .../webglrenderingcontext/attachshader/index.html | 95 ++ .../bindattriblocation/index.html | 70 ++ .../webglrenderingcontext/bindbuffer/index.html | 127 +++ .../bindframebuffer/index.html | 113 +++ .../bindrenderbuffer/index.html | 95 ++ .../webglrenderingcontext/bindtexture/index.html | 117 +++ .../webglrenderingcontext/blendcolor/index.html | 82 ++ .../webglrenderingcontext/blendequation/index.html | 113 +++ .../blendequationseparate/index.html | 126 +++ .../api/webglrenderingcontext/blendfunc/index.html | 180 ++++ .../webglrenderingcontext/bufferdata/index.html | 161 ++++ .../api/webglrenderingcontext/canvas/index.html | 77 ++ .../web/api/webglrenderingcontext/clear/index.html | 89 ++ .../webglrenderingcontext/clearcolor/index.html | 79 ++ .../webglrenderingcontext/cleardepth/index.html | 75 ++ .../api/webglrenderingcontext/commit/index.html | 42 + .../webglrenderingcontext/compileshader/index.html | 81 ++ .../compressedteximage2d/index.html | 242 +++++ .../webglrenderingcontext/createbuffer/index.html | 73 ++ .../createframebuffer/index.html | 67 ++ .../webglrenderingcontext/createprogram/index.html | 81 ++ .../createrenderbuffer/index.html | 67 ++ .../webglrenderingcontext/createshader/index.html | 85 ++ .../webglrenderingcontext/createtexture/index.html | 69 ++ .../api/webglrenderingcontext/cullface/index.html | 79 ++ .../webglrenderingcontext/deletebuffer/index.html | 75 ++ .../deleteframebuffer/index.html | 73 ++ .../webglrenderingcontext/deleteprogram/index.html | 76 ++ .../deleterenderbuffer/index.html | 73 ++ .../webglrenderingcontext/deleteshader/index.html | 66 ++ .../webglrenderingcontext/deletetexture/index.html | 75 ++ .../api/webglrenderingcontext/depthfunc/index.html | 83 ++ .../api/webglrenderingcontext/depthmask/index.html | 70 ++ .../webglrenderingcontext/detachshader/index.html | 103 ++ .../api/webglrenderingcontext/disable/index.html | 139 +++ .../webglrenderingcontext/drawarrays/index.html | 93 ++ .../webglrenderingcontext/drawelements/index.html | 103 ++ .../drawingbufferheight/index.html | 65 ++ .../drawingbufferwidth/index.html | 65 ++ .../api/webglrenderingcontext/enable/index.html | 156 +++ .../enablevertexattribarray/index.html | 102 ++ .../getattriblocation/index.html | 65 ++ .../getcontextattributes/index.html | 79 ++ .../webglrenderingcontext/getextension/index.html | 73 ++ .../webglrenderingcontext/getparameter/index.html | 1009 ++++++++++++++++++++ .../getprograminfolog/index.html | 80 ++ .../getprogramparameter/index.html | 89 ++ .../getshaderparameter/index.html | 72 ++ .../getshadersource/index.html | 67 ++ .../getsupportedextensions/index.html | 538 +++++++++++ .../gettexparameter/index.html | 203 ++++ .../webglrenderingcontext/getuniform/index.html | 213 +++++ .../zh-cn/web/api/webglrenderingcontext/index.html | 367 +++++++ .../api/webglrenderingcontext/isbuffer/index.html | 124 +++ .../webglrenderingcontext/iscontextlost/index.html | 58 ++ .../api/webglrenderingcontext/isenabled/index.html | 193 ++++ .../api/webglrenderingcontext/isprogram/index.html | 77 ++ .../api/webglrenderingcontext/isshader/index.html | 78 ++ .../webglrenderingcontext/linkprogram/index.html | 78 ++ .../webglrenderingcontext/pixelstorei/index.html | 233 +++++ .../renderbufferstorage/index.html | 155 +++ .../api/webglrenderingcontext/scissor/index.html | 94 ++ .../webglrenderingcontext/shadersource/index.html | 70 ++ .../webglrenderingcontext/teximage2d/index.html | 872 +++++++++++++++++ .../webglrenderingcontext/texparameter/index.html | 173 ++++ .../api/webglrenderingcontext/uniform/index.html | 93 ++ .../webglrenderingcontext/uniformmatrix/index.html | 81 ++ .../webglrenderingcontext/useprogram/index.html | 76 ++ .../validateprogram/index.html | 88 ++ .../webglrenderingcontext/vertexattrib/index.html | 81 ++ .../vertexattribpointer/index.html | 270 ++++++ .../api/webglrenderingcontext/viewport/index.html | 91 ++ .../index.html" | 76 ++ 74 files changed, 9945 insertions(+) create mode 100644 files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/clear/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/commit/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/cullface/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/disable/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/enable/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getextension/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/isshader/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/scissor/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/uniform/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html create mode 100644 files/zh-cn/web/api/webglrenderingcontext/viewport/index.html create mode 100644 "files/zh-cn/web/api/webglrenderingcontext/\345\244\232\350\276\271\345\275\242\345\201\217\347\247\273(polygonoffset)/index.html" (limited to 'files/zh-cn/web/api/webglrenderingcontext') diff --git a/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html new file mode 100644 index 0000000000..6e5f43f563 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html @@ -0,0 +1,127 @@ +--- +title: WebGLRenderingContext.activeTexture() +slug: Web/API/WebGLRenderingContext/activeTexture +translation_of: Web/API/WebGLRenderingContext/activeTexture +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.activeTexture() 是 WebGL API 方法之一,用来激活指定的纹理单元。

+ +

句法

+ +
void gl.activeTexture(texture);
+
+ +

参数

+ +
+
texture
+
需要激活的纹理单元。其值是 gl.TEXTUREI ,其中的 I 在 0 到 gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 范围内。
+
+ +

返回值

+ +

无返回值。

+ +

异常

+ +

如果 texture 不是 gl.TEXTUREI( I 在 0 到 gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 范围内),一个 gl.INVALID_ENUM 错误将被抛出。

+ +

示例

+ +

接下来调用 gl.TEXTURE1 作为当前纹理,随后对纹理状态的更改将会影响到这个纹理。

+ +
gl.activeTexture(gl.TEXTURE1);
+
+ +

纹理单元的数量视实现而定, 你可以通过访问常量 MAX_COMBINED_TEXTURE_IMAGE_UNITS 来获取这个值。按照规范来说,最少是 8 个。

+ +
gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+
+ +

想要获取激活的纹理,可以查询常量 ACTIVE_TEXTURE

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// returns "33984" (0x84C0, gl.TEXUTURE0 enum value)
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "activeTexture")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html new file mode 100644 index 0000000000..c91262824e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.attachShader() +slug: Web/API/WebGLRenderingContext/attachShader +translation_of: Web/API/WebGLRenderingContext/attachShader +--- +
{{APIRef("WebGL")}}
+ +

WebGL API  的 WebGLRenderingContext.attachShader() 方法负责往 {{domxref("WebGLProgram")}} 添加一个片段或者顶点着色器。

+ +

语法

+ +
void gl.attachShader(program, shader);
+
+ +

参数

+ +
+
program
+
一个 {{domxref("WebGLProgram")}} 对象
+
shader
+
一个类型为片段或者顶点的 {{domxref("WebGLShader")}}
+
+ +

示例

+ +

以下代码为 {{domxref("WebGLProgram")}} 添加一个预先定义好的着色器。

+ +
var program = gl.createProgram();
+
+// 添加一个预先定义的着色器
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "Could not compile WebGL program. \n\n" + info;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('WebGL', "#5.14.9", "attachShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL man page.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.attachShader")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html new file mode 100644 index 0000000000..20be6a8f7d --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.bindAttribLocation() +slug: Web/API/WebGLRenderingContext/bindAttribLocation +tags: + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindAttribLocation +--- +

{{APIRef("WebGL")}}

+ +

WebGL API的WebGLRenderingContext.bindAttribLocation()方法将通用顶点索引绑定到属性变量。

+ +

语法

+ +
void gl.bindAttribLocation(program, index, name);
+
+ +

参数

+ +
+
program
+
要绑定的{{domxref("WebGLProgram")}} 对象。
+
index
+
{{domxref("GLuint")}} 指定要绑定的通用顶点的索引。
+
name
+
{{domxref("DOMString")}}指定要绑定到通用顶点索引的变量的名称。 该名称不能以“webgl_”或“_webgl_”开头,因为这些名称将保留供WebGL使用。
+
+ +

返回值

+ +

None.

+ +

示例

+ +
gl.bindAttribLocation(program, colorLocation, 'vColor');
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "bindAttribLocation")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glBindAttribLocation.xml", "glBindAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容

+ +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindAttribLocation")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html new file mode 100644 index 0000000000..bb2b94b886 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html @@ -0,0 +1,127 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +tags: + - WebGL + - WebGLRenderingContext + - 绑定Buffer +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL API的WebGLRenderingContext.bindBuffer()方法将给定的{{domxref("WebGLBuffer")}}绑定到目标。

+ +

语法

+ +
void gl.bindBuffer(target, buffer);
+
+ +

参数

+ +
+
target
+
 {{domxref("GLenum")}} 指定绑定点(target)。 可能的值: +
    +
  • gl.ARRAY_BUFFER: 包含顶点属性的Buffer,如顶点坐标,纹理坐标数据或顶点颜色数据。
  • +
  • gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时,可以使用以下值: +
      +
    • gl.COPY_READ_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
    • +
    • gl.COPY_WRITE_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
    • +
    • gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
    • +
    • gl.UNIFORM_BUFFER: 用于存储统一块的Buffer。
    • +
    • gl.PIXEL_PACK_BUFFER: 用于像素传输操作的Buffer。
    • +
    • gl.PIXEL_UNPACK_BUFFER: 用于像素传输操作的Buffer。
    • +
    +
  • +
+
+
buffer
+
要绑定的 {{domxref("WebGLBuffer")}} 。
+
+ +

返回值

+ +

None.

+ +

异常

+ +

只有一个目标可以绑定到给定的 {{domxref("WebGLBuffer")}} 。 尝试将缓冲区绑定到另一个目标将引发 INVALID_OPERATION 错误,并且当前的缓冲区绑定将保持不变。

+ +

一个被{{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}}标记为删除的{{domxref("WebGLBuffer")}}不可重新被绑定,尝试这样做将生成 INVALID_OPERATION 错误,并且当前绑定将保持不变。

+ +

示例

+ +

将缓冲区绑定到目标

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+ +

获取当前绑定

+ +

要检查当前的缓冲区绑定,请查询ARRAY_BUFFER_BINDING和ELEMENT_ARRAY_BUFFER_BINDING常量。

+ +
gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2 API.
{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}{{Spec2('WebGL2')}} +

Updated definition for WebGL 2.

+ +

Adds new target buffers:
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER

+
{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3 API.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindBuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html new file mode 100644 index 0000000000..ff033a902c --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html @@ -0,0 +1,113 @@ +--- +title: WebGLRenderingContext.bindFramebuffer() +slug: Web/API/WebGLRenderingContext/bindFramebuffer +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindFramebuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.bindFramebuffer() 方法将给定的 {{domxref("WebGLFramebuffer")}} 绑定到目标。

+ +

语法

+ +
void gl.bindFramebuffer(target, framebuffer);
+
+ +

参数

+ +
+
target
+
{{domxref("GLenum")}} 指定绑定点(目标)。可能的值为: +
    +
  • gl.FRAMEBUFFER: 收集用于渲染图像的颜色,alpha,深度和模板缓冲区的缓冲区数据存储。
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值: +
      +
    • gl.DRAW_FRAMEBUFFER: 相当于gl.FRAMEBUFFER, 用作绘图,渲染,清除和写入操作。
    • +
    • gl.READ_FRAMEBUFFER: 用作读取操作的资源。
    • +
    +
  • +
+
+
framebuffer
+
要绑定的 {{domxref("WebGLFramebuffer")}} 对象。
+
+ +

返回值

+ +

None.

+ +

异常

+ +

如果目标不是 gl.FRAMEBUFFERgl.DRAW_FRAMEBUFFERgl.READ_FRAMEBUFFER ,则抛出 gl.INVALID_ENUM 错误。

+ +

示例

+ +

绑定帧缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var framebuffer = gl.createFramebuffer();
+
+gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
+ +

获取当前绑定

+ +

要检查当前帧缓冲区绑定,请查询 FRAMEBUFFER_BINDING 常量。

+ +
gl.getParameter(gl.FRAMEBUFFER_BINDING);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.6", "bindFramebuffer")}}{{Spec2('WebGL')}}WebGL初始定义.
{{SpecName('OpenGL ES 2.0', "glBindFramebuffer.xml", "glBindFramebuffer")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册.
{{SpecName('WebGL2', "#3.7.1", "bindFrameBuffer")}}{{Spec2('WebGL2')}}WebGL 2更新定义.
+ 新增: gl.DRAW_FRAMEBUFFERgl.READ_FRAMEBUFFER
{{SpecName('OpenGL ES 3.0', "glBindFramebuffer.xhtml", "glBindFramebuffer")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3 API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindFramebuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html new file mode 100644 index 0000000000..04d07a30fd --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.bindRenderbuffer() +slug: Web/API/WebGLRenderingContext/bindRenderbuffer +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindRenderbuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.bindRenderbuffer() 方法将给定的 {{domxref("WebGLRenderbuffer")}} 绑定到一个目标,它必须是 gl.RENDERBUFFER 。

+ +

语法

+ +
void gl.bindRenderbuffer(target, renderbuffer);
+
+ +

参数

+ +
+
target
+
{{domxref("GLenum")}} 指定绑定点(目标)。 可能的值: +
    +
  • gl.RENDERBUFFER: 以可渲染的内部格式对单个图像进行缓冲数据存储。
  • +
+
+
renderbuffer
+
要绑定的 {{domxref("WebGLRenderbuffer")}} 对象。
+
+ +

返回值

+ +

None.

+ +

抛出错误

+ +

如果 target 不是 gl.RENDERBUFFER,则抛出 gl.INVALID_ENUM 错误。

+ +

示例

+ +

绑定一个渲染缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var renderbuffer = gl.createRenderbuffer();
+
+gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
+
+ +

获取当前绑定

+ +

要检查当前的渲染缓冲区绑定,请查询 RENDERBUFFER_BINDING 常量。

+ +
gl.getParameter(gl.RENDERBUFFER_BINDING);
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.7", "bindRenderbuffer")}}{{Spec2('WebGL')}}初始定义.
{{SpecName('OpenGL ES 2.0', "glBindRenderbuffer.xml", "glBindRenderbuffer")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindRenderbuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html new file mode 100644 index 0000000000..2124e54091 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html @@ -0,0 +1,117 @@ +--- +title: WebGLRenderingContext.bindTexture() +slug: Web/API/WebGLRenderingContext/bindTexture +tags: + - API + - Method + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindTexture +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.bindTexture() 方法将给定的 {{domxref("WebGLTexture")}} 绑定到目标(绑定点)。

+ +

语法

+ +
void gl.bindTexture(target, texture);
+
+ +

参数

+ +
+
target
+
{{domxref("GLenum")}} 指定绑定点(目标)。 可能的值: +
    +
  • gl.TEXTURE_2D: 二维纹理。
  • +
  • gl.TEXTURE_CUBE_MAP: 立方体映射纹理。
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值: +
      +
    • gl.TEXTURE_3D: 三维纹理.
    • +
    • gl.TEXTURE_2D_ARRAY: 二维数组纹理.
    • +
    +
  • +
+
+
texture
+
要绑定的 {{domxref("WebGLTexture")}} 对象。
+
+ +

返回值

+ +

无。

+ +

异常

+ +

如果目标不是 gl.TEXTURE_2D ,gl.TEXTURE_CUBE_MAP,gl.TEXTURE_3D 或 gl.TEXTURE_2D_ARRAY ,则会抛出 gl.INVALID_ENUM 错误。

+ +

示例

+ +

绑定纹理

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+ +

获取当前绑定

+ +

要检查当前纹理绑定,请查询gl.TEXTURE_BINDING_2D或gl.TEXTURE_BINDING_CUBE_MAP常量。

+ +
gl.getParameter(gl.TEXTURE_BINDING_2D);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.8", "bindTexture")}}{{Spec2('WebGL')}}WebGL初始定义。
{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2.0 API手册(类似).
{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}{{Spec2('WebGL2')}}WebGL 2更新定义。
+ 增加: gl.TEXTURE_3D and gl.TEXTURE_2D_ARRAY
{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3.0 API手册(类似)。
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindTexture")}}

+ +

另见

+ + + + diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html new file mode 100644 index 0000000000..224f48a07f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html @@ -0,0 +1,82 @@ +--- +title: WebGLRenderingContext.blendColor() +slug: Web/API/WebGLRenderingContext/blendColor +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/blendColor +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.blendColor() 方法用于设置源和目标混合因子。

+ +

语法

+ +
void gl.blendColor(red, green, blue, alpha);
+
+ +

参数

+ +
+
red
+
{{domxref("GLclampf")}} 红色分量的范围为0到1。
+
green
+
{{domxref("GLclampf")}} 红色分量的范围为0到1。
+
blue
+
{{domxref("GLclampf")}} 红色分量的为0到1。
+
alpha
+
{{domxref("GLclampf")}} 组件(透明度)的范围在0到1。
+
+ +

返回值

+ +

None.

+ +

示例

+ +

要设置混合颜色,请使用:

+ +
gl.blendColor(0, 0.5, 1, 1);
+ +

要获得混合颜色,请查询返回 {{jsxref("Float32Array")}} 的 BLEND_COLOR 常量。

+ +
gl.getParameter(gl.BLEND_COLOR);
+// Float32Array[0, 0.5, 1, 1]
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "blendColor")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glBlendColor.xml", "glBlendColor")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.blendColor")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html new file mode 100644 index 0000000000..6eadfcf91e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html @@ -0,0 +1,113 @@ +--- +title: WebGLRenderingContext.blendEquation() +slug: Web/API/WebGLRenderingContext/blendEquation +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/blendEquation +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.blendEquation() 方法用于将RGB混合方程和阿尔法混合方程设置为单个方程。

+ +

混合方程式确定新像素如何与 {{domxref("WebGLFramebuffer")}} 中的像素组合。

+ +

语法

+ +
void gl.blendEquation(mode);
+
+ +

参数

+ +
+
mode
+
{{domxref("GLenum")}} 指定源和目标颜色的组合方式。 必须是: +
    +
  • gl.FUNC_ADD: 源+目的地(默认值),
  • +
  • gl.FUNC_SUBTRACT: 源 - 目的地,
  • +
  • gl.FUNC_REVERSE_SUBTRACT: 目的地 - 源
  • +
  • 当使用 {{domxref("EXT_blend_minmax")}} 扩展名时: +
      +
    • ext.MIN_EXT: 最小的源和目的地,
    • +
    • ext.MAX_EXT: 最大源和目的地。
    • +
    +
  • +
  • 当使用 {{domxref("WebGL2RenderingContex","WebGL 2上下文","",1)}} 时,可以使用以下值: +
      +
    • gl.MIN: 最小的源和目的地,
    • +
    • gl.MAX: 最大源和目的地。
    • +
    +
  • +
+
+
+ +

异常

+ +

如果模式不是三个可能的值之一,则会抛出gl.INVALID_ENUM错误。

+ +

返回值

+ +

None.

+ +

示例

+ +

要设置混合方程式,请使用:

+ +
gl.blendEquation(gl.FUNC_ADD);
+gl.blendEquation(gl.FUNC_SUBTRACT);
+gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
+
+ +

要获得混合方程,请查询返回 gl.FUNC_ADD,gl.FUNC_SUBTRACT,gl.FUNC_REVERSE_SUBTRACT 或 {{domxref("EXT_blend_minmax")}} 的 BLEND_EQUATION,BLEND_EQUATION_RGB 和 BLEND_EQUATION_ALPHA 常量:ext.MIN_EXT 或 ext.MAX_EXT 。

+ +
gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD;
+// true
+
+gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD;
+// true
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "blendEquation")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glBlendEquation.xml", "glBlendEquation")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glBlendEquation.xml", "glBlendEquation")}}{{Spec2('OpenGL ES 3.0')}}Man page of the OpenGL ES 3.0 API.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.blendEquation")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html new file mode 100644 index 0000000000..e274a77dde --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html @@ -0,0 +1,126 @@ +--- +title: WebGLRenderingContext.blendEquationSeparate() +slug: Web/API/WebGLRenderingContext/blendEquationSeparate +translation_of: Web/API/WebGLRenderingContext/blendEquationSeparate +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext.blendEquationSeparate() method of the WebGL API is used to set the RGB blend equation and alpha blend equation separately.

+ +

The blend equation determines how a new pixel is combined with a pixel already in the {{domxref("WebGLFramebuffer")}}.

+ +

Syntax

+ +
void gl.blendEquationSeparate(modeRGB, modeAlpha);
+
+ +

Parameters

+ +
+
modeRGB
+
A {{domxref("GLenum")}} specifying how the red, green and blue components of source and destination colors are combined. Must be either: +
    +
  • gl.FUNC_ADD: source + destination (default value),
  • +
  • gl.FUNC_SUBTRACT: source - destination,
  • +
  • gl.FUNC_REVERSE_SUBTRACT: destination - source,
  • +
  • When using the {{domxref("EXT_blend_minmax")}} extension: +
      +
    • ext.MIN_EXT: Minimum of source and destination,
    • +
    • ext.MAX_EXT: Maximum of source and destination.
    • +
    +
  • +
  • When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: +
      +
    • gl.MIN: Minimum of source and destination,
    • +
    • gl.MAX: Maximum of source and destination.
    • +
    +
  • +
+
+
modeAlpha
+
A {{domxref("GLenum")}} specifying how the alpha component (transparency) of source and destination colors are combined. Must be either: +
    +
  • gl.FUNC_ADD: source + destination (default value),
  • +
  • gl.FUNC_SUBTRACT: source - destination,
  • +
  • gl.FUNC_REVERSE_SUBTRACT: destination - source,
  • +
  • When using the {{domxref("EXT_blend_minmax")}} extension: +
      +
    • ext.MIN_EXT: Minimum of source and destination,
    • +
    • ext.MAX_EXT: Maximum of source and destination.
    • +
    +
  • +
  • When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: +
      +
    • gl.MIN: Minimum of source and destination,
    • +
    • gl.MAX: Maximum of source and destination.
    • +
    +
  • +
+
+
+ +

Return value

+ +

None.

+ +

Exceptions

+ +

If mode is not one of the three possible values, a gl.INVALID_ENUM error is thrown.

+ +

Examples

+ +

To set the blend equations, use:

+ +
gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT);
+
+ +

To get the current blend equations, query the BLEND_EQUATION, BLEND_EQUATION_RGB and BLEND_EQUATION_ALPHA constants which return gl.FUNC_ADD, gl.FUNC_SUBTRACT, gl.FUNC_REVERSE_SUBTRACT, or if the {{domxref("EXT_blend_minmax")}} is enabled: ext.MIN_EXT or ext.MAX_EXT.

+ +
gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD;
+// true
+
+gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD;
+// true
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "blendEquationSeparate")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glBlendEquationSeparate.xml", "glBlendEquationSeparate")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glBlendEquationSeparate.xhtml", "glBlendEquationSeparate")}}{{Spec2('OpenGL ES 3.0')}}Man page of the OpenGL ES 3.0 API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.blendEquationSeparate")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html new file mode 100644 index 0000000000..1b7bc65eb7 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html @@ -0,0 +1,180 @@ +--- +title: WebGLRenderingContext.blendFunc() +slug: Web/API/WebGLRenderingContext/blendFunc +translation_of: Web/API/WebGLRenderingContext/blendFunc +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.blendFunc() 方法定义了一个用于混合像素算法的函数.

+ +

语法

+ +
void gl.blendFunc(sfactor, dfactor);
+
+ +

参数

+ +
+
sfactor
+
 {{domxref("GLenum")}} 为源混合因子指定一个乘数. 默认值是 gl.ONE. 有关可能的值, 查看下面.
+
dfactor
+
 {{domxref("GLenum")}} 为源目标合因子指定一个乘数. 默认值是 gl.ZERO. 有关可能的值, 查看下面.
+
+ +

返回值

+ +

None.

+ +

异常

+ + + +

常量

+ +

下列常数可用于  sfactordfactor.

+ +

混合颜色的公式可以这样描述: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). RBGA 值在 0 到1 之间.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantFactorDescription
gl.ZERO0,0,0,0所有颜色乘0.
gl.ONE1,1,1,1所有颜色乘1.
gl.SRC_COLORRS, GS, BS, AS将所有颜色乘上源颜色.
gl.ONE_MINUS_SRC_COLOR1-RS, 1-GS, 1-BS, 1-AS每个源颜色所有颜色乘1 .
gl.DST_COLORRD, GD, BD, AD将所有颜色与目标颜色相乘.
gl.ONE_MINUS_DST_COLOR1-RD, 1-GD, 1-BD, 1-AD将所有颜色乘以1减去每个目标颜色.
gl.SRC_ALPHAAS, AS, AS, AS将所有颜色乘以源alpha值.
gl.ONE_MINUS_SRC_ALPHA1-AS, 1-AS, 1-AS, 1-AS将所有颜色乘以1 减去源alpha值.
gl.DST_ALPHAAD, AD, AD, AD将所有颜色与目标alpha值相乘.
gl.ONE_MINUS_DST_ALPHA1-AD, 1-AD, 1-AD, 1-AD将所有颜色乘以1减去目标alpha值.
gl.CONSTANT_COLORRC, GC, BC, AC将所有颜色乘以一个常数颜色.
gl.ONE_MINUS_CONSTANT_COLOR1-RC, 1-GC, 1-BC, 1-AC所有颜色乘以1减去一个常数颜色.
gl.CONSTANT_ALPHAAC, AC, AC, AC将所有颜色乘以一个常数.
gl.ONE_MINUS_CONSTANT_ALPHA1-AC, 1-AC, 1-AC, 1-AC所有颜色乘以1减去一个常数.
gl.SRC_ALPHA_SATURATE +

min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1

+
将RGB颜色乘以源alpha值或1减去目标alpha值中的较小值。alpha值乘以1.
+ +

示例

+ +

使用混合函数, 您首先必须使用参数 gl.BLEND来激活{{domxref("WebGLRenderingContext.enable()")}} 的混合.

+ +
gl.enable(gl.BLEND);
+gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
+
+ +

要获得当前的混合函数, 查询BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, 和BLEND_DST_ALPHA 常量中返回混合函数常量.

+ +
gl.enable(gl.BLEND);
+gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
+gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR;
+// true
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "blendFunc")}}{{Spec2('WebGL')}}Initial definition.
+ In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification.
{{SpecName('OpenGL ES 2.0', "glBlendFunc.xml", "glBlendFunc")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.blendFunc")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html new file mode 100644 index 0000000000..4f6fb7af93 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html @@ -0,0 +1,161 @@ +--- +title: WebGLRenderingContext.bufferData() +slug: Web/API/WebGLRenderingContext/bufferData +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/bufferData +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的WebGLRenderingContext.bufferData()方法创建并初始化了Buffer对象的数据存储区。

+ +

语法

+ +
// WebGL1:
+void gl.bufferData(target, size, usage);
+void gl.bufferData(target, ArrayBuffer? srcData, usage);
+void gl.bufferData(target, ArrayBufferView srcData, usage);
+
+// WebGL2:
+void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);
+
+ +

参数

+ +
+
target
+
{{domxref("GLenum")}} 指定Buffer绑定点(目标)。可取以下值: +
    +
  • gl.ARRAY_BUFFER: 包含顶点属性的Buffer,如顶点坐标,纹理坐标数据或顶点颜色数据。
  • +
  • gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值: +
      +
    • gl.COPY_READ_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
    • +
    • gl.COPY_WRITE_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
    • +
    • gl.TRANSFORM_FEEDBACK_BUFFER: 用于转换反馈操作的Buffer。
    • +
    • gl.UNIFORM_BUFFER: 用于存储统一块的Buffer。
    • +
    • gl.PIXEL_PACK_BUFFER: 用于像素转换操作的Buffer。
    • +
    • gl.PIXEL_UNPACK_BUFFER: 用于像素转换操作的Buffer。
    • +
    +
  • +
+
+
size
+
{{domxref("GLsizeiptr")}} 设定Buffer对象的数据存储区大小。
+
srcData {{optional_inline}}
+
一个{{jsxref("ArrayBuffer")}},{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("ArrayBufferView")}} 类型的数组对象,将被复制到Buffer的数据存储区。 如果为null,数据存储区仍会被创建,但是不会进行初始化和定义。
+
usage
+
{{domxref("GLenum")}} 指定数据存储区的使用方法。可取以下值: +
    +
  • gl.STATIC_DRAW: 缓冲区的内容可能经常使用,而不会经常更改。内容被写入缓冲区,但不被读取。
  • +
  • gl.DYNAMIC_DRAW: 缓冲区的内容可能经常被使用,并且经常更改。内容被写入缓冲区,但不被读取。
  • +
  • gl.STREAM_DRAW: 缓冲区的内容可能不会经常使用。内容被写入缓冲区,但不被读取。
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值: +
      +
    • gl.STATIC_READ: 缓冲区的内容可能经常使用,而不会经常更改。内容从缓冲区读取,但不写入。
    • +
    • gl.DYNAMIC_READ: 缓冲区的内容可能经常使用,并且经常更改。内容从缓冲区读取,但不写入。
    • +
    • gl.STREAM_READ: 缓冲区的内容可能不会经常使用。内容从缓冲区读取,但不写入。
    • +
    • gl.STATIC_COPY: 缓冲区的内容可能经常使用,而不会经常更改。用户不会从缓冲区读取内容,也不写入。
    • +
    • gl.DYNAMIC_COPY: 缓冲区的内容可能经常使用,并且经常更改。用户不会从缓冲区读取内容,也不写入。
    • +
    • gl.STREAM_COPY: 缓冲区的内容可能不会经常使用。用户不会从缓冲区读取内容,也不写入。
    • +
    +
  • +
+
+
srcOffset
+
{{domxref("GLuint")}} 指定读取缓冲时的初始元素索引偏移量。
+
length {{optional_inline}}
+
{{domxref("GLuint")}} 默认为0。
+
+ +

返回值

+ +

None.

+ +

异常

+ + + +

示例

+ +

使用 bufferData

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
+
+ +

获取缓冲区信息

+ +

使用 {{domxref("WebGLRenderingContext.getBufferParameter()")}} 方法检查当前缓冲区的使用情况和缓冲区大小。

+ +
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('WebGL', "#5.14.5", "bufferData")}}{{Spec2('WebGL')}}初次定义
{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API的手册页
{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3 API 的手册页
+
+ 新增 target 可取的buffer值:
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER
+
+ 新增 usage 提示:
+ gl.STATIC_READ,
+ gl.DYNAMIC_READ,
+ gl.STREAM_READ,
+ gl.STATIC_COPY,
+ gl.DYNAMIC_COPY,
+ gl.STREAM_COPY.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.bufferData")}}

+ +

更多

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html b/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..e215713463 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - WebGL + - WebGLRenderingContext + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/canvas +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.canvas 只读属性,对 {{domxref("HTMLCanvasElement")}} 和 {{domxref("OffscreenCanvas")}} 对象的引用。如果绘图上下文没有相关联的 {{HTMLElement("canvas")}} 元素或 {{domxref("OffscreenCanvas")}} 对象,值为 {{jsxref("null")}}。

+ +

语法

+ +
gl.canvas;
+ +

返回值

+ +

{{domxref("HTMLCanvasElement")}} 或 {{domxref("OffscreenCanvas")}} 或 {{jsxref("null")}}。

+ +

示例

+ +

Canvas 元素

+ +

指定 {{HTMLElement("canvas")}} 元素:

+ +
<canvas id="canvas"></canvas>
+
+ +

你可以通过 canvas 得到一个从 WebGLRenderingContext 返回的引用:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+gl.canvas; // HTMLCanvasElement
+
+ +

离屏Canvas

+ +

下面是一个使用试验阶段 {{domxref("OffscreenCanvas")}} 对象的示例:

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+gl.canvas; // OffscreenCanvas
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.canvas")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/clear/index.html b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html new file mode 100644 index 0000000000..ac8f044933 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +translation_of: Web/API/WebGLRenderingContext/clear +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.clear() 方法使用预设值来清空缓冲。

+ +

预设值可以使用 {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}} 、 {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} 或 {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} 设置。

+ +

裁剪、抖动处理和缓冲写入遮罩会影响 clear() 方法。

+ +

句法

+ +
void gl.clear(mask);
+
+ +

参数

+ +
+
mask
+
一个用于指定需要清除的缓冲区的 {{domxref("GLbitfield")}} 。可能的值有: +
    +
  • gl.COLOR_BUFFER_BIT   //颜色缓冲区
  • +
  • gl.DEPTH_BUFFER_BIT   //深度缓冲区
  • +
  • gl.STENCIL_BUFFER_BIT  //模板缓冲区
  • +
+
+
+ +

错误抛出

+ +

如果mask不是以上列出的值,会抛出 gl.INVALID_ENUM 错误。

+ +

返回值

+ +

+ +

示例

+ +

clear() 方法可接受复合值,

+ +
gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+
+ +

要获得当前的清除值,传入 COLOR_CLEAR_VALUE,、DEPTH_CLEAR_VALUE或STENCIL_CLEAR_VALUE 常量。

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.11", "clear")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.clear")}}

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html new file mode 100644 index 0000000000..09293b4450 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.clearColor() +slug: Web/API/WebGLRenderingContext/clearColor +translation_of: Web/API/WebGLRenderingContext/clearColor +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.clearColor() 方法用于设置清空颜色缓冲时的颜色值。

+ +

这指定调用 {{domxref("WebGLRenderingContext.clear", "clear()")}} 方法时使用的颜色值。这些值在0到1的范围间。

+ +

句法

+ +
void gl.clearColor(red, green, blue, alpha);
+
+ +

参数

+ +
+
red
+
一个 {{domxref("GLclampf")}} 类型的值,指定清除缓冲时的红色值。默认值:0。
+
green
+
一个 {{domxref("GLclampf")}} 类型的值,指定清除缓冲时的绿色值。默认值:0。
+
blue
+
一个 {{domxref("GLclampf")}} 类型的值,指定清除缓冲时的蓝色值。默认值:0。
+
alpha
+
一个 {{domxref("GLclampf")}} 类型的值,指定清除缓冲时的不透明度。默认值:0。
+
+ +

返回值

+ +

无。

+ +

示例

+ +
gl.clearColor(1, 0.5, 0.5, 3);
+
+ +

要获取当前的清除颜色,传入COLOR_CLEAR_VALUE常量,返回 {{jsxref("Float32Array")}}。

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "clearColor")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.clearColor")}}

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html new file mode 100644 index 0000000000..a663975cc2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.clearDepth() +slug: Web/API/WebGLRenderingContext/clearDepth +tags: + - WebGL + - 深度清除值 +translation_of: Web/API/WebGLRenderingContext/clearDepth +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.clearDepth() 方法用于设置深度缓冲区的深度清除值。

+ +

这个深度清除值的设定,是为了调用{{domxref("WebGLRenderingContext.clear", "clear()")}} 的时候使用,这个值的范围是0到1。

+ +

语法

+ +
void gl.clearDepth(depth);
+
+ +

参数

+ +
+
depth
+
类型:{{domxref("GLclampf")}}。 深度值的设定,是当清除深度缓冲区的时候使用。默认值为1。
+
+ +

返回值

+ +

None.

+ +

样例

+ +
gl.clearDepth(0.5);
+
+ +

若要获取当前深度清除值,查询DEPTH_CLEAR_VALUE 常量。

+ +
gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+// 0.5
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "clearDepth")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.clearDepth")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/commit/index.html b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html new file mode 100644 index 0000000000..c2e80d04d0 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html @@ -0,0 +1,42 @@ +--- +title: WebGLRenderingContext.commit() +slug: Web/API/WebGLRenderingContext/commit +translation_of: Web/API/WebGLRenderingContext/commit +--- +

{{APIRef("WebGL")}} {{SeeCompatTable}}

+ +

当上下文不是直接固定到一个特定的画布时,WebGLRenderingContext.commit() 方法将帧绘制到其原始的 {{domxref("HTMLCanvasElement")}} 上。

+ +

语法

+ +
void WebGLRenderingContext.commit()
+ +

实例

+ +
var htmlCanvas = document.createElement('canvas');
+var offscreen = htmlCanvas.transferControlToOffscreen();
+var gl = offscreen.getContext('webgl');
+
+// ... 在 gl 离屏上下文中进行一些绘制 ...
+
+// 将帧绘制到 htmlCanvas 上
+gl.commit();
+
+ +

规范

+ +

目前在 OffscreenCanvas 规范中作为草案。

+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.commit")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html new file mode 100644 index 0000000000..313989f0aa --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +
{{APIRef("WebGL")}}
+ +
WebGL API下的方法 WebGLRenderingContext.compileShader()  用于编译一个GLSL着色器,使其成为为二进制数据,然后就可以被{{domxref("WebGLProgram")}}对象所使用.
+ +

语法

+ +
void gl.compileShader(shader);
+
+ +

参数

+ +
+
shader
+
一个片元或顶点着色器 ({{domxref("WebGLShader")}}).
+
+ +

示例

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "compileShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL man page.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.compileShader")}}

+ +

更多:

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html new file mode 100644 index 0000000000..939440ed64 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html @@ -0,0 +1,242 @@ +--- +title: 'WebGLRenderingContext.compressedTexImage[23]D()' +slug: Web/API/WebGLRenderingContext/compressedTexImage2D +translation_of: Web/API/WebGLRenderingContext/compressedTexImage2D +--- +
{{APIRef("WebGL")}}
+ +

下面这两个function:

+ +

 WebGLRenderingContext.compressedTexImage2D()  and WebGL2RenderingContext.compressedTexImage3D()WebGL API 中特指压缩二维或三维纹理图像的格式。

+ +

在使用这些方法之前,必须通过 WebGL extensions, 也就是 WebGL扩展启用压缩图像格式。

+ +

Syntax

+ +
// WebGL 1:
+void gl.compressedTexImage2D(target, level, internalformat, width, height, border, ArrayBufferView? pixels);
+
+// Additionally available in WebGL 2:
+// read from buffer bound to gl.PIXEL_UNPACK_BUFFER
+void gl.compressedTexImage2D(target, level, internalformat, width, height, border, GLsizei imageSize, GLintptr offset);
+void gl.compressedTexImage2D(target, level, internalformat, width, height, border,
+                             ArrayBufferView srcData, optional srcOffset, optional srcLengthOverride);
+
+ // read from buffer bound to gl.PIXEL_UNPACK_BUFFER
+void gl.compressedTexImage3D(target, level, internalformat, width, height, depth, border, GLsizei imageSize, GLintptr offset);
+void gl.compressedTexImage3D(target, level, internalformat, width, height, depth, border,
+                             ArrayBufferView srcData, optional srcOffset, optional srcLengthOverride);
+ +

Parameters

+ +
+
target
+
A {{domxref("GLenum")}} specifying the binding point (target) of the active texture. Possible values for compressedTexImage2D: +
    +
  • gl.TEXTURE_2D: A two-dimensional texture.
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X: Positive X face for a cube-mapped texture.
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X: Negative X face for a cube-mapped texture.
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y: Positive Y face for a cube-mapped texture.
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y: Negative Y face for a cube-mapped texture.
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z: Positive Z face for a cube-mapped texture.
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z: Negative Z face for a cube-mapped texture.
  • +
+ Possible values for compressedTexImage3D: + +
    +
  • gl.TEXTURE_2D_ARRAY
  • +
  • gl.TEXTURE_3D
  • +
+
+
level
+
A {{domxref("GLint")}} specifying the level of detail. Level 0 is the base image level and level n is the nth mipmap reduction level.
+
internalformat
+
A {{domxref("GLenum")}} specifying the compressed image format. Compressed image formats must be enabled by WebGL extensions before using this method. All values are possible for compressedTexImage2D. See compressed texture formats for which are valid for compressedTexImage3D. Possible values: +
    +
  • When using the {{domxref("WEBGL_compressed_texture_s3tc")}} extension: +
      +
    • ext.COMPRESSED_RGB_S3TC_DXT1_EXT
    • +
    • ext.COMPRESSED_RGBA_S3TC_DXT1_EXT
    • +
    • ext.COMPRESSED_RGBA_S3TC_DXT3_EXT
    • +
    • ext.COMPRESSED_RGBA_S3TC_DXT5_EXT
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_s3tc_srgb")}} extension: +
      +
    • ext.COMPRESSED_SRGB_S3TC_DXT1_EXT
    • +
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT
    • +
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT
    • +
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_etc")}} extension: +
      +
    • ext.COMPRESSED_R11_EAC
    • +
    • ext.COMPRESSED_SIGNED_R11_EAC
    • +
    • ext.COMPRESSED_RG11_EAC
    • +
    • ext.COMPRESSED_SIGNED_RG11_EAC
    • +
    • ext.COMPRESSED_RGB8_ETC2
    • +
    • ext.COMPRESSED_RGBA8_ETC2_EAC
    • +
    • ext.COMPRESSED_SRGB8_ETC2
    • +
    • ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
    • +
    • ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
    • +
    • ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_pvrtc")}} extension: +
      +
    • ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG
    • +
    • ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
    • +
    • ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG
    • +
    • ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_etc1")}} extension: +
      +
    • ext.COMPRESSED_RGB_ETC1_WEBGL
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_atc")}} extension: +
      +
    • ext.COMPRESSED_RGB_ATC_WEBGL
    • +
    • ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL
    • +
    • ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL
    • +
    +
  • +
  • When using the {{domxref("WEBGL_compressed_texture_astc")}} extension: +
      +
    • ext.COMPRESSED_RGBA_ASTC_4x4_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_5x4_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_5x5_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_6x5_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_6x6_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_8x5_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_8x6_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_8x8_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_10x5_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_10x6_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_10x10_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_12x10_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR
    • +
    • ext.COMPRESSED_RGBA_ASTC_12x12_KHR
      + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
    • +
    +
  • +
  • When using the {{domxref("EXT_texture_compression_bptc")}} extension: +
      +
    • ext.COMPRESSED_RGBA_BPTC_UNORM_EXT
    • +
    • ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT
    • +
    • ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT
    • +
    • ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT
    • +
    +
  • +
  • When using the {{domxref("EXT_texture_compression_rgtc")}} extension: +
      +
    • ext.COMPRESSED_RED_RGTC1_EXT
    • +
    • ext.COMPRESSED_SIGNED_RED_RGTC1_EXT
    • +
    • ext.COMPRESSED_RED_GREEN_RGTC2_EXT
    • +
    • ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
    • +
    +
  • +
+
+
width
+
A {{domxref("GLsizei")}} specifying the width of the texture.
+
height
+
A {{domxref("GLsizei")}} specifying the height of the texture.
+
depth
+
A {{domxref("GLsizei")}} specifying the depth of the texture/the number of textures in a TEXTURE_2D_ARRAY.
+
border
+
A {{domxref("GLint")}} specifying the width of the border. Must be 0.
+
imageSize
+
A {{domxref("GLsizei")}} specifying the number of bytes to read from the buffer bound to gl.PIXEL_UNPACK_BUFFER.
+
offset
+
A {{domxref("GLintptr")}} specifying the offset in bytes from which to read from the buffer bound to gl.PIXEL_UNPACK_BUFFER.
+
pixels
+
An {{domxref("ArrayBufferView")}} that be used as a data store for the compressed image data in memory.
+
+ +

Return value

+ +

None.

+ +

Examples

+ +
var ext = (
+  gl.getExtension('WEBGL_compressed_texture_s3tc') ||
+  gl.getExtension('MOZ_WEBGL_compressed_texture_s3tc') ||
+  gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc')
+);
+
+var texture = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, texture);
+gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT5_EXT, 512, 512, 0, textureData);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#COMPRESSEDTEXIMAGE2D", "compressedTexImage2D")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glCompressedTexImage2D.xml", "glCompressedTexImage2D")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glCompressedTexImage2D.xhtml", "glCompressedTexImage2D")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3.0 API.
+ +

Browser compatibility

+ + + +

compressedTexImage2D

+ +

{{Compat("api.WebGLRenderingContext.compressedTexImage2D")}}

+ +

compressedTexImage3D

+ +

{{Compat("api.WebGL2RenderingContext.compressedTexImage3D")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html new file mode 100644 index 0000000000..eaf95a97d8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.createBuffer() +slug: Web/API/WebGLRenderingContext/createBuffer +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/createBuffer +--- +

{{APIRef("WebGL")}}

+ +

WebGL API 下的 WebGLRenderingContext.createBuffer() 方法可创建并初始化一个用于储存顶点数据或着色数据的{{domxref("WebGLBuffer")}}对象

+ +

语法

+ +
WebGLBuffer gl.createBuffer();
+
+ +

参数

+ +

无。

+ +

返回值

+ +

一个用于储存顶点数据或着色数据的{{domxref("WebGLBuffer")}}对象

+ +

范例

+ +

创建一个缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.5", "createBuffer")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.createBuffer")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html new file mode 100644 index 0000000000..dfc5401186 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.createFramebuffer() +slug: Web/API/WebGLRenderingContext/createFramebuffer +translation_of: Web/API/WebGLRenderingContext/createFramebuffer +--- +
{{APIRef("WebGL")}}
+ +
WebGLRenderingContext.creatFramebuffer()  是 WebGL API  的一个方法,用来创建和初始化{{domxref("WebGLFramebuffer")}} 对象。
+ +

语法

+ +
WebGLFramebuffer gl.createFramebuffer();
+
+ +

参数

+ +

None.

+ +

返回值

+ +

{{domxref("WebGLFramebuffer")}} 对象

+ +

样例

+ +

创建一个帧缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var framebuffer = gl.createFramebuffer();
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.6", "createFramebuffer")}}{{Spec2('WebGL')}}初始定义.
{{SpecName('OpenGL ES 2.0', "glGenFramebuffers.xml", "glGenFramebuffers")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.createFramebuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html new file mode 100644 index 0000000000..1a0214b0e2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.createProgram() +slug: Web/API/WebGLRenderingContext/createProgram +translation_of: Web/API/WebGLRenderingContext/createProgram +--- +
{{APIRef("WebGL")}}
+ +

WebGL API  的 WebGLRenderingContext.createProgram() 方法用于创建和初始化一个 {{domxref("WebGLProgram")}} 对象。

+ +

语法

+ +
WebGLProgram gl.createProgram();
+
+ +

参数

+ +

无.

+ +

返回值

+ +

一个 {{domxref("WebGLProgram")}} 对象由两个编译过后的 {{domxref("WebGLShader")}} 组成 - 顶点着色器和片段着色器(均由 GLSL 语言所写)。这些组合成一个可用的 WebGL 着色器程序。

+ +

例子

+ +

创建一个 WebGL 着色器程序

+ +
var program = gl.createProgram();
+
+// 添加预先定义好的顶点着色器和片段着色器
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "Could not compile WebGL program. \n\n" + info;
+}
+
+ +

详见 {{domxref("WebGLShader")}} 获取更多关于创建上述代码中顶点着色器和片段着色器的信息。

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('WebGL', "#5.14.9", "createProgram")}}{{Spec2('WebGL')}}初始定义
{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}{{Spec2('OpenGL ES 2.0')}}OpenGL(类似) API的规范文档
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.createProgram")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html new file mode 100644 index 0000000000..c434e1eed2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.createRenderbuffer() +slug: Web/API/WebGLRenderingContext/createRenderbuffer +translation_of: Web/API/WebGLRenderingContext/createRenderbuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.createRenderbuffer() 方法 创建并初始化一个 {{domxref("WebGLRenderbuffer")}} 对象。

+ +

语法

+ +
WebGLRenderbuffer gl.createRenderbuffer();
+
+ +

参数

+ +

None.

+ +

返回值

+ +

一个 {{domxref("WebGLRenderbuffer")}} 对象可以保存数据,例如一张图片,或者可以渲染操作的源或目标。

+ +

例如

+ +

创建一个渲染缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var renderBuffer = gl.createRenderBuffer();
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName('WebGL', "#5.14.7", "createRenderbuffer")}}{{Spec2('WebGL')}}初始定义.
{{SpecName('OpenGL ES 2.0', "glGenRenderbuffers.xml", "glGenRenderbuffers")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.createRenderbuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html new file mode 100644 index 0000000000..a8471ef516 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.createShader() +slug: Web/API/WebGLRenderingContext/createShader +tags: + - API + - Reference + - Shader + - WebGL +translation_of: Web/API/WebGLRenderingContext/createShader +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.createShader() 用于创建一个 {{domxref("WebGLShader")}} 着色器对象,该对象可以使用 {{domxref("WebGLRenderingContext.shaderSource()")}} 和 {{domxref("WebGLRenderingContext.compileShader()")}} 方法配置着色器代码.

+ +

语法

+ +
WebGLShader gl.createShader(type);
+
+ +

参数

+ +
+
type
+
参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。
+
+ +

示例

+ +

详见 {{domxref("WebGLShader")}} 的使用和示例

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('WebGL', "#5.14.9", "createShader")}}{{Spec2('WebGL')}}初次定义
{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL 帮助页
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.createShader")}}

+ +

其他相关

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html new file mode 100644 index 0000000000..eaf77b4e27 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html @@ -0,0 +1,69 @@ +--- +title: WebGLRenderingContext.createTexture() +slug: Web/API/WebGLRenderingContext/createTexture +translation_of: Web/API/WebGLRenderingContext/createTexture +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.createTexture() 方法创建并初始化了一个{{domxref("WebGLTexture")}} 目标。

+ +

语法

+ +
WebGLTexture gl.createTexture();
+
+ +

参数

+ +

无。

+ +

返回值

+ +

一个可以被任何图像绑定的 {{domxref("WebGLTexture")}} 目标

+ +

示例

+ +

另见 Using textures in WebGL上的WebGL tutorial

+ +

创建一个纹理

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.8", "createTexture")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.createTexture")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html new file mode 100644 index 0000000000..bcabedcb95 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.cullFace() +slug: Web/API/WebGLRenderingContext/cullFace +translation_of: Web/API/WebGLRenderingContext/cullFace +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.cullFace() 指定正面和/或背面多边形是否可以剔除。

+ +

语法

+ +
void gl.cullFace(mode);
+
+ +

参数

+ +
+
mode
+
{{domxref("GLenum")}} 指定适合进行剔除的面是正面还是背面。默认值是 gl.BACK. 可能的值有: +
    +
  • gl.FRONT
  • +
  • gl.BACK
  • +
  • gl.FRONT_AND_BACK
  • +
+
+
+ +

返回值

+ +

None.

+ +

示例

+ +

多边形剔除功能默认不开启。 想要开启这个功能, 使用{{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法,传入参数gl.CULL_FACE.

+ +
gl.enable(gl.CULL_FACE);
+gl.cullFace(gl.FRONT_AND_BACK);
+
+ +

需要 CULL_FACE_MODE 常量来检查当前多边形剔除模式。

+ +
gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;
+// true
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "cullFace")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glCullFace.xml", "glCullFace")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.cullFace")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html new file mode 100644 index 0000000000..f8cbf3a7f1 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.deleteBuffer() +slug: Web/API/WebGLRenderingContext/deleteBuffer +translation_of: Web/API/WebGLRenderingContext/deleteBuffer +--- +
{{APIRef("WebGL")}}
+ +
WebGL APIWebGLRenderingContext.deleteBuffer()用于删除给定的{{domxref("WebGLBuffer")}}对象;若给定的{{domxref("WebGLBuffer")}}对象已经被删除了,调用该方法将不会产生任何效果。
+ +

 

+ +

语法

+ +
void gl.deleteBuffer(buffer);
+
+ +

参数

+ +
+
buffer
+
要删除的{{domxref("WebGLBuffer")}} 对象.
+
+ +

返回值

+ +

None.

+ +

例子

+ +

删除一个buffer

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+// ...
+
+gl.deleteBuffer(buffer);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.deleteBuffer")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html new file mode 100644 index 0000000000..eea968007a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.deleteFramebuffer() +slug: Web/API/WebGLRenderingContext/deleteFramebuffer +translation_of: Web/API/WebGLRenderingContext/deleteFramebuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.deleteFramebuffer() 方法用来删除给定的{{domxref("WebGLFramebuffer")}} 对象. 如果帧缓冲区已被删除,则此方法无效。.

+ +

语法

+ +
void gl.deleteFramebuffer(framebuffer);
+
+ +

参数

+ +
+
framebuffer
+
 将要删除的{{domxref("WebGLFramebuffer")}} 对象.
+
+ +

返回值

+ +

None.

+ +

示例

+ +

删除一个帧缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var framebuffer = gl.createFramebuffer();
+
+// ...
+
+gl.deleteFramebuffer(framebuffer);
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.6", "deleteFramebuffer")}}{{Spec2('WebGL')}}初始定义.
{{SpecName('OpenGL ES 2.0', "glDeleteFramebuffers.xml", "glDeleteFramebuffers")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.deleteFramebuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html new file mode 100644 index 0000000000..3cde58761f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.deleteProgram() +slug: Web/API/WebGLRenderingContext/deleteProgram +translation_of: Web/API/WebGLRenderingContext/deleteProgram +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.deleteProgram() 用于删除一个 {{domxref("WebGLProgram")}} 对象. 如果该{{domxref("WebGLProgram")}} 对象已经被删除,该方法不会产生任何作用

+ +

语法

+ +
void gl.deleteProgram(program);
+
+ +

参数

+ +
+
program
+
需要被删除的 {{domxref("WebGLProgram")}} 对象
+
+ +

返回值

+ +

None.

+ +

示例

+ +

删除一个程序

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var program = gl.createProgram();
+
+// ...
+
+gl.deleteProgram(program);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规格状态解释
{{SpecName('WebGL', "#5.14.9", "deleteProgram")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDeleteProgram.xml", "glDeleteProgram")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器支持

+ + + +

{{Compat("api.WebGLRenderingContext.deleteProgram")}}

+ +

其他相关

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html new file mode 100644 index 0000000000..ff3acc9e56 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.deleteRenderbuffer() +slug: Web/API/WebGLRenderingContext/deleteRenderbuffer +translation_of: Web/API/WebGLRenderingContext/deleteRenderbuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.deleteRenderbuffer() 方法用来删除给定的 {{domxref("WebGLRenderbuffer")}} 对象. 如果渲染缓冲区已被删除,则此方法无效.

+ +

语法

+ +
void gl.deleteRenderbuffer(renderbuffer);
+
+ +

参数

+ +
+
renderbuffer
+
将要删除的{domxref("WebGLRenderbuffer")}} 对象.
+
+ +

返回值

+ +

None.

+ +

示例

+ +

删除一个渲染缓冲区

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var renderbuffer = gl.createRenderbuffer();
+
+// ...
+
+gl.deleteRenderbuffer(renderbuffer);
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.7", "deleteRenderbuffer")}}{{Spec2('WebGL')}}初始定义.
{{SpecName('OpenGL ES 2.0', "glDeleteRenderbuffers.xml", "glDeleteRenderbuffers")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.deleteRenderbuffer")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html new file mode 100644 index 0000000000..54a7e9aaea --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html @@ -0,0 +1,66 @@ +--- +title: WebGLRenderingContext.deleteShader() +slug: Web/API/WebGLRenderingContext/deleteShader +translation_of: Web/API/WebGLRenderingContext/deleteShader +--- +
{{APIRef("WebGL")}} 
+ +
WebGLRenderingContext.deleteShader() 用于删除一个参数提供的 {{domxref("WebGLShader")}}对象. 如果该{{domxref("WebGLShader")}}对象已经被删除,该方法不会有任何作用。
+ +

Syntax

+ +
void gl.deleteShader(shader);
+
+ +

参数

+ +
+
shader
+
需要被删除的 {{domxref("WebGLShader")}} 对象
+
+ +

返回值

+ +

None.

+ +

示例

+ +

删除一个着色器

+ +
gl.deleteShader(shader);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规格状态解释
{{SpecName('WebGL', "#5.14.9", "deleteShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.deleteShader")}}

+ +

其他相关

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html new file mode 100644 index 0000000000..1871f5384f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.deleteTexture() +slug: Web/API/WebGLRenderingContext/deleteTexture +translation_of: Web/API/WebGLRenderingContext/deleteTexture +--- +
{{APIRef("WebGL")}}
+ +
WebGLRenderingContext.deleteTexture()方法删除指定的{{domxref("WebGLTexture")}}对象。如果纹理已被删除,则此方法无效。
+ + + +

Syntax

+ +
void gl.deleteTexture(texture);
+
+ +

Parameters

+ +
+
texture
+
将要删除的{{domxref("WebGLTexture")}} 对象.
+
+ +

Return value

+ +

无.

+ +

Examples

+ +

Deleting a texture

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+// ...
+
+gl.deleteTexture(texture);
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.8", "deleteTexture")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDeleteTextures.xml", "glDeleteTextures")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.deleteTexture")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html new file mode 100644 index 0000000000..71c4c1b04e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html @@ -0,0 +1,83 @@ +--- +title: WebGLRenderingContext.depthFunc() +slug: Web/API/WebGLRenderingContext/depthFunc +translation_of: Web/API/WebGLRenderingContext/depthFunc +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的 WebGLRenderingContext.depthFunc() 方法,指定将输入像素深度与当前深度缓冲区值进行比较的函数。

+ +

语法

+ +
void gl.depthFunc(func);
+
+ +

参数

+ +
+
func
+
是一个指定深度比较函数的 {{domxref("GLenum")}},它设置像素将被绘制的条件。默认值是 gl.LESS。可能的值是: +
    +
  • gl.NEVER(永不通过)
  • +
  • gl.LESS(如果传入值小于深度缓冲值,则通过)
  • +
  • gl.EQUAL(如果传入值等于深度缓冲区值,则通过)
  • +
  • gl.LEQUAL(如果传入值小于或等于深度缓冲区值,则通过)
  • +
  • gl.GREATER(如果传入值大于深度缓冲区值,则通过)
  • +
  • gl.NOTEQUAL(如果传入的值不等于深度缓冲区值,则通过)
  • +
  • gl.GEQUAL(如果传入值大于或等于深度缓冲区值,则通过)
  • +
  • gl.ALWAYS(总是通过)
  • +
+
+
+ +

返回值

+ +

无。

+ +

示例

+ +

深度测试默认是禁用的。 要启用或禁用深度测试,请使用带有参数  gl.DEPTH_TEST 的 {{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法。

+ +
gl.enable(gl.DEPTH_TEST);
+gl.depthFunc(gl.NEVER);
+
+ +

要检查当前深度函数,请查询 DEPTH_FUNC 常量。

+ +
gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;
+// true
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('WebGL', "#5.14.3", "depthFunc")}}{{Spec2('WebGL')}}初始定义
{{SpecName('OpenGL ES 2.0', "glDepthFunc.xml", "glDepthFunc")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API 手册
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.depthFunc")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html new file mode 100644 index 0000000000..e4039e915f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.depthMask() +slug: Web/API/WebGLRenderingContext/depthMask +translation_of: Web/API/WebGLRenderingContext/depthMask +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.depthMask() 方法设置是否启用写入深度缓冲。

+ +

语法

+ +
void gl.depthMask(flag);
+
+ +

参数

+ +
+
flag
+
一个 {{domxref("GLboolean")}} ,用于设置是否启用写入深度缓冲。默认值:true,表示启用写入。
+
+ +

返回值

+ +

无。

+ +

例子

+ +
gl.depthMask(false);
+
+ +

要获得当前的深度遮罩值,传入 DEPTH_WRITEMASK 常量,返回  {{jsxref("Boolean")}}.

+ +
gl.getParameter(gl.DEPTH_WRITEMASK);
+// false
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "depthMask")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDepthMask.xml", "glDepthMask")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.depthMask")}}

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html new file mode 100644 index 0000000000..fba169ad44 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html @@ -0,0 +1,103 @@ +--- +title: WebGLRenderingContext.detachShader() +slug: Web/API/WebGLRenderingContext/detachShader +translation_of: Web/API/WebGLRenderingContext/detachShader +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的WebGLRenderingContext.detachShader()  方法:从一个 {{domxref("WebGLProgram")}}中分离一个先前附加的片段或者顶点着色器 ({{domxref("WebGLShader")}} ) .

+ +

Syntax

+ +
void gl.detachShader(program, shader);
+
+ +

Parameters

+ +
+
program
+
一个 {{domxref("WebGLProgram")}} 对象.
+
shader
+
一个顶点或者片元着色器 {{domxref("WebGLShader")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "detachShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDetachShader.xml", "glDetachShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL man page.
+ +

例子

+ +

使用detachShader方法分离一个顶点或片元着色器

+ +
//顶点着色器
+    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, vertexSrc);
+    gl.compileShader(vertexShader);
+    //片元着色器
+    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。
+    gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc设置一个 WebGLShader 的源码。
+    gl.compileShader(fragmentShader);
+
+    //WebGLProgram
+    var program = gl.createProgram();//创建 WebGLProgram
+    gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);//链接给入的 WebGLProgram 对象
+    gl.detachShader(program, vertexShader); //从一个WebGLProgram中分离一个先前附加的片段或者顶点着色器;
+    gl.detachShader(program, fragmentShader);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+
+ +

 

+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.detachShader")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/disable/index.html b/files/zh-cn/web/api/webglrenderingcontext/disable/index.html new file mode 100644 index 0000000000..c1717db568 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/disable/index.html @@ -0,0 +1,139 @@ +--- +title: WebGLRenderingContext.disable() +slug: Web/API/WebGLRenderingContext/disable +translation_of: Web/API/WebGLRenderingContext/disable +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext.disable() method of the WebGL API disables specific WebGL capabilities for this context.

+ +

Syntax

+ +
void gl.disable(cap);
+
+ +

Parameters

+ +
+
cap
+
A {{domxref("GLenum")}} specifying which WebGL capability to disable. Possible values:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
gl.BLENDDeactivates blending of the computed fragment color values. See {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACEDeactivates culling of polygons. See {{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TESTDeactivates depth comparisons and updates to the depth buffer. See {{domxref("WebGLRenderingContext.depthFunc()")}}.
gl.DITHERDeactivates dithering of color components before they get written to the color buffer.
gl.POLYGON_OFFSET_FILLDeactivates adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.
gl.SAMPLE_ALPHA_TO_COVERAGEDeactivates the computation of a temporary coverage value determined by the alpha value.
gl.SAMPLE_COVERAGEDeactivates ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.
gl.SCISSOR_TESTDeactivates the scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.
gl.STENCIL_TESTDeactivates stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.
+ When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + + + + + + + + + + + + + + +
ConstantDescription
gl.RASTERIZER_DISCARDDeactivates that primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored.
+
+
+ +

Return value

+ +

None.

+ +

Examples

+ +
gl.disable(gl.DITHER);
+
+ +

To check if a capability is disabled, use the {{domxref("WebGLRenderingContext.isEnabled()")}} method:

+ +
gl.isEnabled(gl.DITHER);
+// false
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "disable")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glDisable.xml", "glDisable")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glDisable")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3.0 API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.disable")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html new file mode 100644 index 0000000000..f27d923833 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html @@ -0,0 +1,93 @@ +--- +title: WebGLRenderingContext.drawArrays() +slug: Web/API/WebGLRenderingContext/drawArrays +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/drawArrays +--- +
{{APIRef("WebGL")}}
+ +

 WebGL API 中的WebGLRenderingContext.drawArrays()方法用于从向量数组中绘制图元。

+ +

语法

+ +
void gl.drawArrays(mode, first, count);
+
+ +

参数

+ +
+
mode
+
{{domxref("GLenum")}} 类型,指定绘制图元的方式,可能值如下。 +
    +
  • gl.POINTS: 绘制一系列点。
  • +
  • gl.LINE_STRIP: 绘制一个线条。即,绘制一系列线段,上一点连接下一点。
  • +
  • gl.LINE_LOOP: 绘制一个线圈。即,绘制一系列线段,上一点连接下一点,并且最后一点与第一个点相连。
  • +
  • gl.LINES: 绘制一系列单独线段。每两个点作为端点,线段之间不连接。
  • +
  • gl.TRIANGLE_STRIP:绘制一个三角带
  • +
  • gl.TRIANGLE_FAN:绘制一个三角扇
  • +
  • gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
  • +
+
+
first
+
{{domxref("GLint")}} 类型 ,指定从哪个点开始绘制。
+
count
+
{{domxref("GLsizei")}} 类型,指定绘制需要使用到多少个点。
+
+ +

返回值

+ +

无。

+ +

异常

+ + + +

示例

+ +
gl.drawArrays(gl.POINTS, 0, 8);
+
+ +

文档规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.11", "drawArrays")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.drawArrays")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html new file mode 100644 index 0000000000..e0dc9e96c6 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html @@ -0,0 +1,103 @@ +--- +title: WebGLRenderingContext.drawElements() +slug: Web/API/WebGLRenderingContext/drawElements +tags: + - API + - Method + - Reference + - WebGL +translation_of: Web/API/WebGLRenderingContext/drawElements +--- +
{{APIRef("WebGL")}}
+ +

该 WebGLRenderingContext.drawElements() 方法 在 WebGL API 从数组数据渲染图元.

+ +

语法

+ +
void gl.drawElements(mode, count, type, offset);
+
+ +

参数

+ +
+
mode
+
{{domxref("枚举类型")}} 指定要渲染的图元类型。可以是以下类型: +
    +
  • gl.POINTS: 画单独的点。
  • +
  • gl.LINE_STRIP: 画一条直线到下一个顶点。
  • +
  • gl.LINE_LOOP: 绘制一条直线到下一个顶点,并将最后一个顶点返回到第一个顶点.
  • +
  • gl.LINES: 在一对顶点之间画一条线.
  • +
  • gl.TRIANGLE_STRIP
  • +
  • gl.TRIANGLE_FAN
  • +
  • gl.TRIANGLES: 为一组三个顶点绘制一个三角形.
  • +
+
+
count
+
{{domxref("整数型")}} 指定要渲染的元素数量.
+
type
+
{{domxref("枚举类型")}} 指定元素数组缓冲区中的值的类型。可能的值是: +
    +
  • gl.UNSIGNED_BYTE
  • +
  • gl.UNSIGNED_SHORT
  • +
  • 当使用 {{domxref("OES_element_index_uint")}} 扩展时: +
      +
    • gl.UNSIGNED_INT
    • +
    +
  • +
+
+
offset
+
 {{domxref("字节单位")}} 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数.
+
+ +

返回值

+ +

None.

+ +

异常

+ + + +

例子

+ +
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED_BYTE, 0);
+
+ +

格式

+ + + + + + + + + + + + + + + + + + + +
格式状态注解
{{SpecName('WebGL', "#5.14.11", "drawElements")}}{{Spec2('WebGL')}}建议第一次定义.
{{SpecName('OpenGL ES 2.0', "glDrawElements.xml", "glDrawElements")}}{{Spec2('OpenGL ES 2.0')}}规范 OpenGL 手册
+ +

浏览器兼容

+ + + +

{{Compat("api.WebGLRenderingContext.drawElements")}}

+ +

相关参考

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html new file mode 100644 index 0000000000..4fbe5ff28a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.drawingBufferHeight +slug: Web/API/WebGLRenderingContext/drawingBufferHeight +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/drawingBufferHeight +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.drawingBufferHeight 只读属性,指示当前绘图缓冲区的实际高度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的高度属性, 如果实现未能提供所要求的高度,其值将有所不同。

+ +

语法

+ +
gl.drawingBufferHeight;
+ +

示例

+ +

指定 {{HTMLElement("canvas")}} 元素:

+ +
<canvas id="canvas"></canvas>
+
+ +

你可以通过下面几行代码来获取绘图缓冲区的高度:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+gl.drawingBufferHeight; // 150
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebGL", "#DOM-WebGLRenderingContext-drawingBufferHeight", "WebGLRenderingContext.drawingBufferHeight")}}{{Spec2("WebGL")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.drawingBufferHeight")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html new file mode 100644 index 0000000000..7d259a52ed --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.drawingBufferWidth +slug: Web/API/WebGLRenderingContext/drawingBufferWidth +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/drawingBufferWidth +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.drawingBufferWidth 只读属性, 指示当前绘图缓冲区的实际宽度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的宽度属性。如果实现未能提供所要求的宽度,值将有所不同。

+ +

语法

+ +
gl.drawingBufferWidth;
+ +

示例

+ +

指定{{HTMLElement("canvas")}} 元素:

+ +
<canvas id="canvas"></canvas>
+
+ +

你可以通过下面几行代码来获取绘图缓冲区的宽度:

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.drawingBufferWidth; // 300
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebGL", "#DOM-WebGLRenderingContext-drawingBufferWidth", "WebGLRenderingContext.drawingBufferWidth")}}{{Spec2("WebGL")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.drawingBufferWidth")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/enable/index.html b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html new file mode 100644 index 0000000000..19fe6655ff --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html @@ -0,0 +1,156 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/enable +tags: + - WebGLRenderingContext.enable +translation_of: Web/API/WebGLRenderingContext/enable +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 中的WebGLRenderingContext.enable() 方法,用于对该上下文开启某种特性。

+ +

语法

+ +
void gl.enable(cap);参数
+ +
+
cap
+
让WebGL开启某种特性,可能的值:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
gl.BLEND激活片元的颜色融合计算. 参见 {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACE激活多边形正反面剔除. 参见{{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TEST +

激活深度比较,并且更新深度缓冲区。参见{{domxref("WebGLRenderingContext.depthFunc()")}}.

+
gl.DITHER +

 

+ +

激活在写入颜色缓冲区之前,抖动颜色成分。

+
gl.POLYGON_OFFSET_FILL +

激活添加多边形片段的深度值偏移。参见{{domxref("WebGLRenderingContext.polygonOffset()")}}.

+
gl.SAMPLE_ALPHA_TO_COVERAGE +

激活通过alpha值决定的临时覆盖值计算。(抗锯齿)

+
gl.SAMPLE_COVERAGE +

激活使用临时覆盖值,位和运算片段的覆盖值。参见 {{domxref("WebGLRenderingContext.sampleCoverage()")}}.

+
gl.SCISSOR_TEST +

激活剪裁测试,即丢弃在剪裁矩形范围外的片段。{{domxref("WebGLRenderingContext.scissor()")}}.

+
gl.STENCIL_TEST +

激活模板测试并且更新模板缓冲区。参见{{domxref("WebGLRenderingContext.stencilFunc()")}}.

+
+ 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时, 可以添加使用下面的值。 + + + + + + + + + + + + + + +
ConstantDescription
gl.RASTERIZER_DISCARD +

图元光栅化阶段之前,但在任意的transform反馈之后,就立刻被丢弃。gl.clear()命令被忽略。

+
+
+
+ +

返回值

+ +

None.

+ +

样例

+ +
gl.enable(gl.DITHER);
+
+ +

如果要检测可用性,可以使用 {{domxref("WebGLRenderingContext.isEnabled()")}} 方法:

+ +
gl.isEnabled(gl.DITHER);
+// true
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "enable")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL ES 2.0 API.
{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}{{Spec2('OpenGL ES 3.0')}}Man page of the OpenGL ES 3.0 API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.enable")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html new file mode 100644 index 0000000000..493c9efa59 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -0,0 +1,102 @@ +--- +title: WebGLRenderingContext.enableVertexAttribArray() +slug: Web/API/WebGLRenderingContext/enableVertexAttribArray +translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray +--- +
{{APIRef("WebGL")}}
+ +

WebGL API中,使用 {{domxref("WebGLRenderingContext")}} 中的enableVertexAttribArray() 方法,可以打开属性数组列表中指定索引处的通用顶点属性数组。

+ +
+

你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

+
+ +

在WebGL中,作用于顶点的数据会先储存在attributes。这些数据仅对JavaScript代码和顶点着色器可用。属性由索引号引用到GPU维护的属性列表中。在不同的平台或GPU上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL层会分配其他属性。

+ +

无论怎样,都需要你使用enableVertexAttribArray()方法,来激活每一个属性以便使用,不被激活的属性是不会被使用的。一旦激活,以下其他方法就可以获取到属性的值了,包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}},{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}},和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。

+ +

语法

+ +
void gl.enableVertexAttribArray(index);
+
+ +

参数

+ +

index

+ +
+
类型为{{domxref("GLuint")}} 的索引,指向要激活的顶点属性。如果您只知道属性的名称,不知道索引,您可以使用以下方法来获取索引{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
+
+ +

返回值

+ +

undefined.

+ +

错误

+ +

您可以使用{{domxref("WebGLRenderingContext.getError", "getError()")}}方法,来检查使用enableVertexAttribArray()时发生的错误。

+ +
+
WebGLRenderingContext.INVALID_VALUE
+
非法的 index 。一般是 index 大于或等于了顶点属性列表允许的最大值。该值可以通过 WebGLRenderingContext.MAX_VERTEX_ATTRIBS获取。
+
+ +

例子

+ +

该例子是 A basic 2D WebGL animation example 中的一部分,用以说明 enableVertexArray() 是如何激活顶点属性,并将顶点数据传输到shader函数的。

+ +
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+
+aVertexPosition =
+    gl.getAttribLocation(shaderProgram, "aVertexPosition");
+
+gl.enableVertexAttribArray(aVertexPosition);
+gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
+      gl.FLOAT, false, 0, 0);
+
+gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
+ +
该段代码来自于 "A basic 2D WebGL animation example." 中的 the function animateScene() 。 通过连接来查看全文,您可以查看产生的动画效果。
+ +

以上代码中,使用了{{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}来设置将用于绘图的顶点数据的缓存。然后使用{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}来获取顶点数据在shader函数中的索引。

+ +

我们用 enableVertexAttribArray() 函数来激活 aVertexPosition中记录的索引位置,以便在后面对该顶点属性进行数据绑定。

+ +

使用{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}} 将缓存数据绑定到shader函数中的顶点属性。于是,我们可以通过{{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}}函数将顶点一一绘制。

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..fb8cd90aa8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getAttribLocation() 方法返回了给定{{domxref("WebGLProgram")}}对象中某属性的下标指向位置。

+ +

语法

+ +
GLint gl.getAttribLocation(program, name);
+
+ +

参数

+ +
+
program
+
一个包含了属性参数的{{domxref("WebGLProgram")}} 对象。
+
name
+
需要获取下标指向位置的 {{domxref("DOMString")}} 属性参数名
+
+ +

返回值

+ +

表明属性位置的下标 {{domxref("GLint")}} 数字,如果找不到该属性则返回-1。

+ +

示例

+ +
gl.getAttribLocation(program, 'vColor');
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}原始定义.
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API的主页.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html new file mode 100644 index 0000000000..a7eccd10a4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.getContextAttributes() +slug: Web/API/WebGLRenderingContext/getContextAttributes +translation_of: Web/API/WebGLRenderingContext/getContextAttributes +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getContextAttributes() 方法返回一个包含实际上下文参数的 WebGLContextAttributes 对象。如果上下文丢失,可能返回 {{jsxref("null")}}。

+ +

语法

+ +
gl.getContextAttributes();
+ +

返回值

+ +

一个包含实际上下文参数的 WebGLContextAttributes 的对象,或 {{jsxref("null")}} (如果上下文丢失)。

+ +

实例

+ +

给定 {{HTMLElement("canvas")}} 元素

+ +
<canvas id="canvas"></canvas>
+
+ +

和给定 WebGL 上下文

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.getContextAttributes();
+
+ +

getContextAttributes 方法返回描述在此上下文中设置的属性的对象,例如:

+ +
{
+  alpha: true,
+  antialias: true,
+  depth: true,
+  failIfMajorPerformanceCaveat: false,
+  premultipliedAlpha: true,
+  preserveDrawingBuffer: false,
+  stencil: false
+}
+ +

上下文的属性可以在用 {{domxref("HTMLCanvasElement.getContext()")}} 方法创建上下文时设置:

+ +
canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });
+ +

有关各个属性的更多信息,请参阅 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}}。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName("WebGL", "#5.14.2", "WebGLRenderingContext.getContextAttributes")}}{{Spec2("WebGL")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getContextAttributes")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html new file mode 100644 index 0000000000..2058a25943 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.getExtension() +slug: Web/API/WebGLRenderingContext/getExtension +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/getExtension +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getExtension() 方法可以启用一个 WebGL 扩展。

+ +

语法

+ +
gl.getExtension(name);
+ +

参数

+ +
+
name
+
以 {{jsxref("String")}} 形式表示的需要启用的 WebGL 扩展的名称。
+
+ +

返回值

+ +

一个 WebGL 扩展对象。如果扩展名称(区分大小写)与 {{domxref("WebGLRenderingContext.getSupportedExtensions")}} 中的任何结果都不匹配,则只会返回 {{jsxref("null")}} 。

+ +

示例

+ +

当一个 WebGL 扩展被启用后,就可以使用该扩展提供的方法、属性和常量。

+ +
var canvas = document.getElementById('canvas');
+gl = canvas.getContext('webgl');
+
+gl.getExtension('WEBGL_lose_context').loseContext();
+
+ +

WebGL 扩展

+ +

WebGL API 的扩展在 WebGL Extension Registry 定义。目前支持的扩展如下:

+ +

{{page("en-US/docs/Web/API/WebGL_API", "Extensions")}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebGL", "#5.14.14", "WebGLRenderingContext.getExtension")}}{{Spec2("WebGL")}}初次定义
+ +

浏览器兼容性

+ +

{{page("en-US/docs/Web/API/WebGL_API/Using_Extensions", "Browser_compatibility")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html new file mode 100644 index 0000000000..371ce46ef3 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html @@ -0,0 +1,1009 @@ +--- +title: WebGLRenderingContext.getParameter() +slug: Web/API/WebGLRenderingContext/getParameter +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/getParameter +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.getParameter() 方法为传入的参数名称返回一个值。

+ +

语法

+ +
any gl.getParameter(pname);
+
+ +

参数

+ +
+
pname
+
一个指定要返回哪个参数值的 {{domxref("GLenum")}}。请参阅下文的可能值。
+
+ +

返回值

+ +

取决于参数。

+ +

参数名称

+ +

WebGL 1

+ +

使用 {{domxref("WebGLRenderingContext")}} 时,您可以查询以下 pname 参数。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量返回类型描述
gl.ACTIVE_TEXTURE{{domxref("GLenum")}} 
gl.ALIASED_LINE_WIDTH_RANGE{{jsxref("Float32Array")}} (with 2 elements) 
gl.ALIASED_POINT_SIZE_RANGE{{jsxref("Float32Array")}} (with 2 elements) 
gl.ALPHA_BITS{{domxref("GLint")}} 
gl.ARRAY_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.BLEND{{domxref("GLboolean")}} 
gl.BLEND_COLOR{{jsxref("Float32Array")}} (with 4 values) 
gl.BLEND_DST_ALPHA{{domxref("GLenum")}} 
gl.BLEND_DST_RGB{{domxref("GLenum")}} 
gl.BLEND_EQUATION{{domxref("GLenum")}} 
gl.BLEND_EQUATION_ALPHA{{domxref("GLenum")}} 
gl.BLEND_EQUATION_RGB{{domxref("GLenum")}} 
gl.BLEND_SRC_ALPHA{{domxref("GLenum")}} 
gl.BLEND_SRC_RGB{{domxref("GLenum")}} 
gl.BLUE_BITS{{domxref("GLint")}} 
gl.COLOR_CLEAR_VALUE{{jsxref("Float32Array")}} (with 4 values) 
gl.COLOR_WRITEMASKsequence<{{domxref("GLboolean")}}> (with 4 values) 
gl.COMPRESSED_TEXTURE_FORMATS{{jsxref("Uint32Array")}}返回压缩的纹理格式。
+
+ 当使用 {{domxref("WEBGL_compressed_texture_s3tc")}} 扩展时: +
    +
  • ext.COMPRESSED_RGB_S3TC_DXT1_EXT
  • +
  • ext.COMPRESSED_RGBA_S3TC_DXT1_EXT
  • +
  • ext.COMPRESSED_RGBA_S3TC_DXT3_EXT
  • +
  • ext.COMPRESSED_RGBA_S3TC_DXT5_EXT
  • +
+ +

当使用 {{domxref("WEBGL_compressed_texture_s3tc_srgb")}} 扩展时:

+ +
    +
  • ext.COMPRESSED_SRGB_S3TC_DXT1_EXT
  • +
  • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT
  • +
  • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT
  • +
  • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
  • +
+ 当使用 {{domxref("WEBGL_compressed_texture_es3")}} 扩展时: + +
    +
  • ext.COMPRESSED_R11_EAC
  • +
  • ext.COMPRESSED_SIGNED_R11_EAC
  • +
  • ext.COMPRESSED_RG11_EAC
  • +
  • ext.COMPRESSED_SIGNED_RG11_EAC
  • +
  • ext.COMPRESSED_RGB8_ETC2
  • +
  • ext.COMPRESSED_RGBA8_ETC2_EAC
  • +
  • ext.COMPRESSED_SRGB8_ETC2
  • +
  • ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
  • +
  • ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • +
  • ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • +
+ 当使用 {{domxref("WEBGL_compressed_texture_pvrtc")}} 扩展时: + +
    +
  • ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG
  • +
  • ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
  • +
  • ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG
  • +
  • ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG
  • +
+ 当使用 {{domxref("WEBGL_compressed_texture_etc1")}} 扩展时: + +
    +
  • ext.COMPRESSED_RGB_ETC1_WEBGL
  • +
+ 当使用 {{domxref("WEBGL_compressed_texture_atc")}} 扩展时: + +
    +
  • ext.COMPRESSED_RGB_ATC_WEBGL
  • +
  • ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL
  • +
  • ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL
  • +
+ 当使用 {{domxref("WEBGL_compressed_texture_astc")}} 扩展时: + +
    +
  • ext.COMPRESSED_RGBA_ASTC_4x4_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_5x4_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_5x5_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_6x5_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_6x6_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_8x5_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_8x6_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_8x8_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_10x5_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_10x6_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_10x6_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_10x10_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_12x10_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR
  • +
  • ext.COMPRESSED_RGBA_ASTC_12x12_KHR
    + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
  • +
+
gl.CULL_FACE{{domxref("GLboolean")}} 
gl.CULL_FACE_MODE{{domxref("GLenum")}} 
gl.CURRENT_PROGRAM{{domxref("WebGLProgram")}} 
gl.DEPTH_BITS{{domxref("GLint")}} 
gl.DEPTH_CLEAR_VALUE{{domxref("GLfloat")}} 
gl.DEPTH_FUNC{{domxref("GLenum")}} 
gl.DEPTH_RANGE{{jsxref("Float32Array")}} (with 2 elements) 
gl.DEPTH_TEST{{domxref("GLboolean")}} 
gl.DEPTH_WRITEMASK{{domxref("GLboolean")}} 
gl.DITHER{{domxref("GLboolean")}} 
gl.ELEMENT_ARRAY_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.FRAMEBUFFER_BINDING{{domxref("WebGLFramebuffer")}} 
gl.FRONT_FACE{{domxref("GLenum")}} 
gl.GENERATE_MIPMAP_HINT{{domxref("GLenum")}} 
gl.GREEN_BITS{{domxref("GLint")}} 
gl.IMPLEMENTATION_COLOR_READ_FORMAT{{domxref("GLenum")}} 
gl.IMPLEMENTATION_COLOR_READ_TYPE{{domxref("GLenum")}} 
gl.LINE_WIDTH{{domxref("GLfloat")}} 
gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS{{domxref("GLint")}} 
gl.MAX_CUBE_MAP_TEXTURE_SIZE{{domxref("GLint")}} 
gl.MAX_FRAGMENT_UNIFORM_VECTORS{{domxref("GLint")}} 
gl.MAX_RENDERBUFFER_SIZE{{domxref("GLint")}} 
gl.MAX_TEXTURE_IMAGE_UNITS{{domxref("GLint")}} 
gl.MAX_TEXTURE_SIZE{{domxref("GLint")}} 
gl.MAX_VARYING_VECTORS{{domxref("GLint")}} 
gl.MAX_VERTEX_ATTRIBS{{domxref("GLint")}} 
gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS{{domxref("GLint")}} 
gl.MAX_VERTEX_UNIFORM_VECTORS{{domxref("GLint")}} 
gl.MAX_VIEWPORT_DIMS{{jsxref("Int32Array")}} (with 2 elements) 
gl.PACK_ALIGNMENT{{domxref("GLint")}} 
gl.POLYGON_OFFSET_FACTOR{{domxref("GLfloat")}} 
gl.POLYGON_OFFSET_FILL{{domxref("GLboolean")}} 
gl.POLYGON_OFFSET_UNITS{{domxref("GLfloat")}} 
gl.RED_BITS{{domxref("GLint")}} 
gl.RENDERBUFFER_BINDING{{domxref("WebGLRenderbuffer")}} 
gl.RENDERER{{domxref("DOMString")}} 
gl.SAMPLE_BUFFERS{{domxref("GLint")}} 
gl.SAMPLE_COVERAGE_INVERT{{domxref("GLboolean")}} 
gl.SAMPLE_COVERAGE_VALUE{{domxref("GLfloat")}} 
gl.SAMPLES{{domxref("GLint")}} 
gl.SCISSOR_BOX{{jsxref("Int32Array")}} (with 4 elements) 
gl.SCISSOR_TEST{{domxref("GLboolean")}} 
gl.SHADING_LANGUAGE_VERSION{{domxref("DOMString")}} 
gl.STENCIL_BACK_FAIL{{domxref("GLenum")}} 
gl.STENCIL_BACK_FUNC{{domxref("GLenum")}} 
gl.STENCIL_BACK_PASS_DEPTH_FAIL{{domxref("GLenum")}} 
gl.STENCIL_BACK_PASS_DEPTH_PASS{{domxref("GLenum")}} 
gl.STENCIL_BACK_REF{{domxref("GLint")}} 
gl.STENCIL_BACK_VALUE_MASK{{domxref("GLuint")}} 
gl.STENCIL_BACK_WRITEMASK{{domxref("GLuint")}} 
gl.STENCIL_BITS{{domxref("GLint")}} 
gl.STENCIL_CLEAR_VALUE{{domxref("GLint")}} 
gl.STENCIL_FAIL{{domxref("GLenum")}} 
gl.STENCIL_FUNC{{domxref("GLenum")}} 
gl.STENCIL_PASS_DEPTH_FAIL{{domxref("GLenum")}} 
gl.STENCIL_PASS_DEPTH_PASS{{domxref("GLenum")}} 
gl.STENCIL_REF{{domxref("GLint")}} 
gl.STENCIL_TEST{{domxref("GLboolean")}} 
gl.STENCIL_VALUE_MASK{{domxref("GLuint")}} 
gl.STENCIL_WRITEMASK{{domxref("GLuint")}} 
gl.SUBPIXEL_BITS{{domxref("GLint")}} 
gl.TEXTURE_BINDING_2D{{domxref("WebGLTexture")}} 
gl.TEXTURE_BINDING_CUBE_MAP{{domxref("WebGLTexture")}} 
gl.UNPACK_ALIGNMENT{{domxref("GLint")}} 
gl.UNPACK_COLORSPACE_CONVERSION_WEBGL{{domxref("GLenum")}} 
gl.UNPACK_FLIP_Y_WEBGL{{domxref("GLboolean")}} 
gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL{{domxref("GLboolean")}} 
gl.VENDOR{{domxref("DOMString")}} 
gl.VERSION{{domxref("DOMString")}} 
gl.VIEWPORT{{jsxref("Int32Array")}} (with 4 elements) 
+ +

WebGL 2

+ +

使用 {{domxref("WebGL2RenderingContext")}} 时,您可以查询以下 pname 参数。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量返回类型描述
gl.COPY_READ_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.COPY_WRITE_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.DRAW_BUFFERi{{domxref("GLenum")}} 
gl.DRAW_FRAMEBUFFER_BINDING{{domxref("WebGLFramebuffer")}} 
gl.FRAGMENT_SHADER_DERIVATIVE_HINT{{domxref("GLenum")}} 
gl.MAX_3D_TEXTURE_SIZE{{domxref("GLint")}} 
gl.MAX_ARRAY_TEXTURE_LAYERS{{domxref("GLint")}} 
gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL{{domxref("GLint64")}} 
gl.MAX_COLOR_ATTACHMENTS{{domxref("GLint")}} 
gl.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS{{domxref("GLint64")}} 
gl.MAX_COMBINED_UNIFORM_BLOCKS{{domxref("GLint")}} 
gl.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS{{domxref("GLint64")}} 
gl.MAX_DRAW_BUFFERS{{domxref("GLint")}} 
gl.MAX_ELEMENT_INDEX{{domxref("GLint64")}} 
gl.MAX_ELEMENTS_INDICES{{domxref("GLint")}} 
gl.MAX_ELEMENTS_VERTICES{{domxref("GLint")}} 
gl.MAX_FRAGMENT_INPUT_COMPONENTS{{domxref("GLint")}} 
gl.MAX_FRAGMENT_UNIFORM_BLOCKS{{domxref("GLint")}} 
gl.MAX_FRAGMENT_UNIFORM_COMPONENTS{{domxref("GLint")}} 
gl.MAX_PROGRAM_TEXEL_OFFSET{{domxref("GLint")}} 
gl.MAX_SAMPLES{{domxref("GLint")}} 
gl.MAX_SERVER_WAIT_TIMEOUT{{domxref("GLint64")}} 
gl.MAX_TEXTURE_LOD_BIAS{{domxref("GLfloat")}} 
gl.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS{{domxref("GLint")}} 
gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS{{domxref("GLint")}} 
gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS{{domxref("GLint")}} 
gl.MAX_UNIFORM_BLOCK_SIZE{{domxref("GLint64")}} 
gl.MAX_UNIFORM_BUFFER_BINDINGS{{domxref("GLint")}} 
gl.MAX_VARYING_COMPONENTS{{domxref("GLint")}} 
gl.MAX_VERTEX_OUTPUT_COMPONENTS{{domxref("GLint")}} 
gl.MAX_VERTEX_UNIFORM_BLOCKS{{domxref("GLint")}} 
gl.MAX_VERTEX_UNIFORM_COMPONENTS{{domxref("GLint")}} 
gl.MIN_PROGRAM_TEXEL_OFFSET{{domxref("GLint")}} 
gl.PACK_ROW_LENGTH{{domxref("GLint")}} 
gl.PACK_SKIP_PIXELS{{domxref("GLint")}} 
gl.PACK_SKIP_ROWS{{domxref("GLint")}} 
gl.PIXEL_PACK_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.PIXEL_UNPACK_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.RASTERIZER_DISCARD{{domxref("GLboolean")}} 
gl.READ_BUFFER{{domxref("GLenum")}} 
gl.READ_FRAMEBUFFER_BINDING{{domxref("WebGLFramebuffer")}} 
gl.SAMPLE_ALPHA_TO_COVERAGE{{domxref("GLboolean")}} 
gl.SAMPLE_COVERAGE{{domxref("GLboolean")}} 
gl.SAMPLER_BINDING{{domxref("WebGLSampler")}} 
gl.TEXTURE_BINDING_2D_ARRAY{{domxref("WebGLTexture")}} 
gl.TEXTURE_BINDING_3D{{domxref("WebGLTexture")}} 
gl.TRANSFORM_FEEDBACK_ACTIVE{{domxref("GLboolean")}} 
gl.TRANSFORM_FEEDBACK_BINDING{{domxref("WebGLTransformFeedback")}} 
gl.TRANSFORM_FEEDBACK_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.TRANSFORM_FEEDBACK_PAUSED{{domxref("GLboolean")}} 
gl.UNIFORM_BUFFER_BINDING{{domxref("WebGLBuffer")}} 
gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT{{domxref("GLint")}} 
gl.UNPACK_IMAGE_HEIGHT{{domxref("GLint")}} 
gl.UNPACK_ROW_LENGTH{{domxref("GLint")}} 
gl.UNPACK_SKIP_IMAGES{{domxref("GLint")}} 
gl.UNPACK_SKIP_PIXELS{{domxref("GLint")}} 
gl.UNPACK_SKIP_ROWS{{domxref("GLint")}} 
gl.VERTEX_ARRAY_BINDING{{domxref("WebGLVertexArrayObject")}} 
+ +

WebGL 扩展

+ +

当使用 WebGL 扩展 时,您可以查询以下 pname 参数:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量返回类型扩展描述
ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT{{domxref("GLfloat")}}{{domxref("EXT_texture_filter_anisotropic")}}最大可用各向异性。
ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES{{domxref("GLenum")}}{{domxref("OES_standard_derivatives")}}GLSL 内置函数的导数计算精度:dFdx、 dFdy 和 fwidth
ext.MAX_COLOR_ATTACHMENTS_WEBGL{{domxref("GLint")}}{{domxref("WEBGL_draw_buffers")}}帧缓冲区颜色附着点的最大数量。
ext.MAX_DRAW_BUFFERS_WEBGL{{domxref("GLint")}}{{domxref("WEBGL_draw_buffers")}}绘图缓冲区的最大数量。
ext.DRAW_BUFFER0_WEBGL
+ ext.DRAW_BUFFER1_WEBGL
+ ext.DRAW_BUFFER2_WEBGL
+ ext.DRAW_BUFFER3_WEBGL
+ ext.DRAW_BUFFER4_WEBGL
+ ext.DRAW_BUFFER5_WEBGL
+ ext.DRAW_BUFFER6_WEBGL
+ ext.DRAW_BUFFER7_WEBGL
+ ext.DRAW_BUFFER8_WEBGL
+ ext.DRAW_BUFFER9_WEBGL
+ ext.DRAW_BUFFER10_WEBGL
+ ext.DRAW_BUFFER11_WEBGL
+ ext.DRAW_BUFFER12_WEBGL
+ ext.DRAW_BUFFER13_WEBGL
+ ext.DRAW_BUFFER14_WEBGL
+ ext.DRAW_BUFFER15_WEBGL
{{domxref("GLenum")}}{{domxref("WEBGL_draw_buffers")}}绘图缓冲区。
ext.VERTEX_ARRAY_BINDING_OES{{domxref("WebGLVertexArrayObjectOES")}}{{domxref("OES_vertex_array_object")}}绑定的顶点数组对象(VAO)。
ext.TIMESTAMP_EXT{{domxref("GLuint64EXT")}} +

{{domxref("EXT_disjoint_timer_query")}}

+
当前时间。
ext.GPU_DISJOINT_EXT{{domxref("GLboolean")}}{{domxref("EXT_disjoint_timer_query")}} +

返回 GPU 是否执行了任何不相交的操作。

+
+ +

示例

+ +
gl.getParameter(gl.DITHER);
+gl.getParameter(gl.VERSION);
+gl.getParameter(gl.VIEWPORT);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('WebGL', "#5.14.3", "getParameter")}}{{Spec2('WebGL')}}初始定义。
{{SpecName('WebGL2', "#3.7.2", "getParameter")}}{{Spec2('WebGL2')}}添加额外的参数名称。
{{SpecName('OpenGL ES 2.0', "glGet.xml", "glGet")}}{{Spec2('OpenGL ES 2.0')}}(类似的)OpenGL API的手册页。
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getParameter")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html new file mode 100644 index 0000000000..8ba38fdf5e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html @@ -0,0 +1,80 @@ +--- +title: WebGLRenderingContext.getProgramInfoLog() +slug: Web/API/WebGLRenderingContext/getProgramInfoLog +translation_of: Web/API/WebGLRenderingContext/getProgramInfoLog +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getProgramInfoLog  返回参数中指定的{{domxref("WebGLProgram")}} object 的信息. 这些信息包括在linking过程中的错误以及 WebGLProgram objects 合法性检查的错误.

+ +

Syntax

+ +
gl.getProgramInfoLog(program);
+ +

Parameters

+ +
+
program
+
A {{domxref("WebGLProgram")}} to query.
+
+ +

Return value

+ +

返回 {{domxref("DOMString")}} 包含 diagnostic , warning ...等等关于上一次linking和valiadation操作的信息. 对于刚刚创建的{{domxref("WebGLProgram")}} object , 返回一个空字符串.

+ +

Examples

+ +

Checking program errors

+ +
var canvas = document.getElementsById('canvas');
+var gl = canvas.getContext('webgl');
+var program = gl.createProgram();
+
+//vsSource is the source-code-string of vertex-shader
+//fsSource is the source-code-string of fragment-shader
+var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+gl.getProgramInfoLog(program);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "getProgramInfoLog")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGetProgramInfoLog.xml", "glGetProgramInfoLog")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.getProgramInfoLog")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html new file mode 100644 index 0000000000..91cba90cc1 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.getProgramParameter() +slug: Web/API/WebGLRenderingContext/getProgramParameter +translation_of: Web/API/WebGLRenderingContext/getProgramParameter +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getProgramParameter() 方法返回WebGLProgram的信息。

+ +

语法

+ +
any gl.getProgramParameter(program, pname);
+
+ +

参数

+ +
+
program
+
A {{domxref("WebGLProgram")}} to get parameter information from.
+
pname
+
A {{domxref("Glenum")}} specifying the information to query. Possible values: +
    +
  • gl.DELETE_STATUS: Returns a {{domxref("GLboolean")}} indicating whether or not the program is flagged for deletion.
  • +
  • gl.LINK_STATUS: Returns a {{domxref("GLboolean")}} indicating whether or not the last link operation was successful.
  • +
  • gl.VALIDATE_STATUS: Returns a {{domxref("GLboolean")}} indicating whether or not the last validation operation was successful.
  • +
  • gl.ATTACHED_SHADERS: Returns a {{domxref("GLint")}} indicating the number of attached shaders to a program.
  • +
  • gl.ACTIVE_ATTRIBUTES: Returns a {{domxref("GLint")}} indicating the number of active attribute variables to a program.
  • +
  • gl.ACTIVE_UNIFORMS: Returns a {{domxref("GLint")}} indicating the number of active uniform variables to a program.
  • +
  • When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: +
      +
    • gl.TRANSFORM_FEEDBACK_BUFFER_MODE: Returns a {{domxref("GLenum")}} indicating the buffer mode when transform feedback is active. May be gl.SEPARATE_ATTRIBS or gl.INTERLEAVED_ATTRIBS.
    • +
    • gl.TRANSFORM_FEEDBACK_VARYINGS: Returns a {{domxref("GLint")}} indicating the number of varying variables to capture in transform feedback mode.
    • +
    • gl.ACTIVE_UNIFORM_BLOCKS: Returns a {{domxref("GLint")}} indicating the number of uniform blocks containing active uniforms.
    • +
    +
  • +
+
+
+ +

返回值

+ +

Returns the requested program information (as specified with pname).

+ +

例子

+ +
gl.getProgramParameter(program, gl.DELETE_STATUS);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "getProgramParameter")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGetProgramiv.xml", "glGetProgramiv")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
{{SpecName('WebGL2', "#3.7.7", "getProgramParameter")}}{{Spec2('WebGL2')}}Adds new pname values:
+ gl.TRANSFORM_FEEDBACK_BUFFER_MODE,
+ gl.TRANSFORM_FEEDBACK_VARYINGS,
+ gl.ACTIVE_UNIFORM_BLOCKS
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.getProgramParameter")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html new file mode 100644 index 0000000000..f9e76ea261 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html @@ -0,0 +1,72 @@ +--- +title: WebGLRenderingContext.getShaderParameter() +slug: Web/API/WebGLRenderingContext/getShaderParameter +translation_of: Web/API/WebGLRenderingContext/getShaderParameter +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getShaderParameter() 返回给定的着色器信息

+ +

语法

+ +
any gl.getShaderParameter(shader, pname);
+
+ +

参数

+ +
+
shader
+
需要获取信息的着色器对象
+
pname
+
指定要查询的信息属性名称
+
values: +
    +
  • gl.DELETE_STATUS:标示着色器是否被删除,删除(GL_TRUE)未删除(GL_FALSE).
  • +
  • gl.COMPILE_STATUS: 标示着色器是否编译成功,是(GL_TRUE)不是(GL_FALSE
  • +
  • gl.SHADER_TYPE: 标示着色器类型,是顶点着色器(gl.VERTEX_SHADER)还是片段着色器(gl.FRAGMENT_SHADER)
  • +
+
+
+ +

返回值

+ +

返回对应着色器属性信息

+ +

例子

+ +
gl.getShaderParameter(shader, gl.SHADER_TYPE);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getShaderParameter")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html new file mode 100644 index 0000000000..377ff49e8d --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.getShaderSource() +slug: Web/API/WebGLRenderingContext/getShaderSource +translation_of: Web/API/WebGLRenderingContext/getShaderSource +--- +
{{APIRef("WebGL")}}
+ +
WebGL API 中的 WebGLRenderingContext.getShaderSource() 方法以{{domxref("DOMString")}}的形式返回了一个{{domxref("WebGLShader")}}的源码。
+ +

语法

+ +
DOMString gl.getShaderSource(shader);
+
+ +

参数

+ +
+
shader
+
要获取源码的 {{domxref("WebGLShader")}} 对象
+
+ +

返回值

+ +

一个包含了指定着色器的源码的 {{domxref("DOMString")}} 。

+ +

例子

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "getShaderSource")}}{{Spec2('WebGL')}}初始定义
{{SpecName('OpenGL ES 2.0', "glGetShaderSource.xml", "glGetShaderSource")}}{{Spec2('OpenGL ES 2.0')}}(类似) OpenGL API的手册
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getShaderSource")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html new file mode 100644 index 0000000000..f203803fdf --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html @@ -0,0 +1,538 @@ +--- +title: WebGLRenderingContext.getSupportedExtensions() +slug: Web/API/WebGLRenderingContext/getSupportedExtensions +translation_of: Web/API/WebGLRenderingContext/getSupportedExtensions +--- +
{{APIRef("WebGL")}}
+ +

这个 WebGLRenderingContext.getSupportedExtensions() 方法返回一个所有的支持WebGL 扩展的列表。

+ +

语法

+ +
gl.getSupportedExtensions();
+ +

返回值

+ +

一个字符串 {{jsxref("Array")}} 数组,包含所有支持 WebGL 的扩展。

+ +

示例代码

+ +
var canvas = document.getElementById("canvas");
+gl = canvas.getContext("webgl");
+
+var extensions = gl.getSupportedExtensions();
+// Array [ "ANGLE_instanced_arrays", "EXT_blend_minmax", ... ]
+
+ +

浏览 {{domxref("WebGLRenderingContext.getExtension()")}} 方法得到一个特定的扩展对象。

+ +

WebGL 扩展

+ +

所有WebGL API 扩展都被注册在 WebGL Extension Registry 中。当前的扩展是:

+ +

{{page("en-US/docs/Web/API/WebGL_API", "Extension_interfaces")}}

+ +

规格说明书

+ + + + + + + + + + + + + + +
规格说明书状态注释
{{SpecName("WebGL", "#5.14.14", "WebGLRenderingContext.getSupportedExtensions")}}{{Spec2("WebGL")}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("2.0")}}11125.1
ANGLE_instanced_arrays{{CompatUnknown}}{{CompatGeckoDesktop("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_blend_minmax{{CompatUnknown}}{{CompatGeckoDesktop("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_color_buffer_half_float{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_disjoint_timer_query{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_frag_depth{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_sRGB{{CompatUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_shader_texture_lod{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatUnknown}}{{CompatGeckoDesktop("17.0")}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_element_index_uint{{CompatUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float{{CompatUnknown}}{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float_linear{{CompatUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_half_float{{CompatUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_half_float_linear{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_vertex_array_object{{CompatUnknown}}{{CompatGeckoDesktop("25.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_color_buffer_float{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_atc{{CompatUnknown}}{{CompatGeckoDesktop("18.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_etc1{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_pvrtc{{CompatUnknown}}{{CompatGeckoDesktop("18.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatUnknown}}{{CompatGeckoDesktop("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_debug_renderer_info{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_debug_shaders{{CompatUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_depth_texture{{CompatUnknown}}{{CompatGeckoDesktop("17.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_draw_buffers{{CompatUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_lose_context{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}25{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}128.1
ANGLE_instanced_arrays{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_blend_minmax{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_color_buffer_half_float{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_disjoint_timer_query{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_frag_depth{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_sRGB{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_shader_texture_lod{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_element_index_uint{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float_linear{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_half_float{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_half_float_linear{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_vertex_array_object{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_color_buffer_float{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_atc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_etc1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_pvrtc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_debug_renderer_info{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_debug_shaders{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_depth_texture{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_draw_buffers{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_lose_context{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Toggling the webgl.enable-draft-extensions preference in about:config is required.

+ +

[2] This was prefixed as MOZ_EXT_texture_filter_anisotropic in prior versions.

+ +

浏览其他相关资源

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html new file mode 100644 index 0000000000..b37ddcbe37 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html @@ -0,0 +1,203 @@ +--- +title: WebGLRenderingContext.getTexParameter() +slug: Web/API/WebGLRenderingContext/getTexParameter +tags: + - API + - WebGL + - WebGL渲染上下文 + - 引用 + - 方法 + - 纹理 +translation_of: Web/API/WebGLRenderingContext/getTexParameter +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.getTexParameter() 此WebGL API方法返回特定的纹理信息。

+ +

语法

+ +
any gl.getTexParameter(target, pname);
+
+ +

参数

+ +
+
target
+
一个 {{domxref("GLenum")}} 接口类型的绑定的点(target). 可能的值有: +
    +
  • gl.TEXTURE_2D: 一个二维纹理.
  • +
  • gl.TEXTURE_CUBE_MAP: 一个立方体纹理.
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}接口, 可能会出现以下值: +
      +
    • gl.TEXTURE_3D: 一个三维纹理.
    • +
    • gl.TEXTURE_2D_ARRAY: 一个二维纹理数组.
    • +
    +
  • +
+
+
pname
+
一个{{domxref("Glenum")}}接口类型的要查询的信息. 可能的值有: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
pname返回的类型描述可能返回的值
可用的WebGL 1的上下文
gl.TEXTURE_MAG_FILTER{{domxref("GLenum")}}纹理的放大滤镜gl.LINEAR (default value), gl.NEAREST.
gl.TEXTURE_MIN_FILTER{{domxref("GLenum")}}纹理的缩小滤镜gl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (default value), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_S{{domxref("GLenum")}} +

封装的纹理坐标方法s(对应u坐标)

+
gl.REPEAT (default value), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_T{{domxref("GLenum")}}封装的纹理坐标方法 t(对应v坐标)gl.REPEAT (default value), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
使用 {{domxref("EXT_texture_filter_anisotropic")}} 接口增加可用的扩展方法/属性
ext.TEXTURE_MAX_ANISOTROPY_EXT{{domxref("GLfloat")}}纹理所有方向的最大值一个浮点型的任意值.
使用WebGL 2上下文之后增加的可用方法/属性
gl.TEXTURE_BASE_LEVEL{{domxref("GLint")}}纹理贴图层级一个整型任意值.
gl.TEXTURE_COMPARE_FUNC{{domxref("GLenum")}}比较方法gl.LEQUAL (default value), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODE{{domxref("GLenum")}}纹理的比较模式gl.NONE (default value), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_IMMUTABLE_FORMAT{{domxref("GLboolean")}}纹理的格式和尺寸是否可变true 或者 false.
gl.TEXTURE_IMMUTABLE_LEVELS{{domxref("GLuint")}}纹理的可变等级无符号整型任意值.
gl.TEXTURE_MAX_LEVEL{{domxref("GLint")}}贴图数组层级的最大值整型任意值.
gl.TEXTURE_MAX_LOD{{domxref("GLfloat")}}纹理细致程度的最大值浮点型任意值.
gl.TEXTURE_MIN_LOD{{domxref("GLfloat")}}纹理细致程度的最小值浮点型任意值.
gl.TEXTURE_WRAP_R{{domxref("GLenum")}}封装的纹理坐标方法 rgl.REPEAT (default value), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
+
+
+ +

返回值

+ +

返回需要的纹理信息 (和 pname类型相同). 如果发生错误, 就返回{{jsxref("null")}}.

+ +

示例

+ +
gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
说明状态备注
{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}{{Spec2('WebGL')}}最初的WebGL的定义.
{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2.0 API的主页(相似).
{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}{{Spec2('WebGL2')}}升级的WebGL定义.
{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3.0 API的主页(相似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getTexParameter")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html b/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html new file mode 100644 index 0000000000..924ee123be --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html @@ -0,0 +1,213 @@ +--- +title: WebGLRenderingContext.getUniform() +slug: Web/API/WebGLRenderingContext/getUniform +translation_of: Web/API/WebGLRenderingContext/getUniform +--- +
{{APIRef("WebGL")}}
+ +
WebGL APIWebGLRenderingContext.getUniform() 方法返回指定位置的全局变量的值。
+ +

语法

+ +
any gl.getUniform(program, location);
+
+ +

参数

+ +
+
program
+
包含全局变量的一个{{domxref("WebGLProgram")}}。
+
location
+
包含要获取的全局变量位置的 {{domxref("WebGLUniformLocation")}} 对象。
+
+ +

返回值

+ +

返回的类型取决于全局变量的类型:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
变量类型(着色器内)返回值类型
在WebGL 1中支持的
boolean{{domxref("GLBoolean")}}
int{{domxref("GLint")}}
float{{domxref("GLfloat")}}
vec2{{jsxref("Float32Array")}} (with 2 elements)
ivec2{{jsxref("Int32Array")}} (with 2 elements)
bvec2{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 2 elements)
vec3{{jsxref("Float32Array")}} (with 3 elements)
ivec3{{jsxref("Int32Array")}} (with 3 elements)
bvec3{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 3 elements)
vec4{{jsxref("Float32Array")}} (with 4 elements)
ivec4{{jsxref("Int32Array")}} (with 4 elements)
bvec4{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 4 elements)
mat2{{jsxref("Float32Array")}} (with 4 elements)
mat3{{jsxref("Float32Array")}} (with 9 elements)
mat4{{jsxref("Float32Array")}} (with 16 elements)
sampler2D{{domxref("GLint")}}
samplerCube{{domxref("GLint")}}
在WebGL 2中新增支持的
uint{{domxref("GLuint")}}
uvec2{{jsxref("Uint32Array")}} (with 2 elements)
uvec3{{jsxref("Uint32Array")}} (with 3 elements)
uvec4{{jsxref("Uint32Array")}} (with 4 elements)
mat2x3{{jsxref("Float32Array")}} (with 6 elements)
mat2x4{{jsxref("Float32Array")}} (with 8 elements)
mat3x2{{jsxref("Float32Array")}} (with 6 elements)
mat3x4{{jsxref("Float32Array")}} (with 12 elements)
mat4x2{{jsxref("Float32Array")}} (with 8 elements)
mat4x3{{jsxref("Float32Array")}} (with 12 elements)
any sampler type{{domxref("GLint")}}
+ +

示例

+ +
var loc = gl.getUniformLocation(program, 'u_foobar');
+gl.getUniform(program, loc);
+
+//code in vertex-shader
+//...
+//uniform mat4 uNormalMatrix;
+//...
+//gl.getUniform(program,gl.getUniformLocation(program,"uNormalMatrix"))
+//>Float32Array(16) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注解
{{SpecName('WebGL', "#5.14.10", "getUniform")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glGetUniform.xml", "glGetUniform")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2 API.
{{SpecName('WebGL2', "#3.7.8", "getUniform")}}{{Spec2('WebGL2')}}Updated definition for WebGL.
{{SpecName('OpenGL ES 3.0', "glGetUniform.xhtml", "glGetUniform")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3 API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.getUniform")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/index.html b/files/zh-cn/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..35b83bd3dc --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/index.html @@ -0,0 +1,367 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。 

+ +

要获得这个接口的对象,可以通过在 <canvas> 元素上调用 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,调用时传入 “webgl” 参数:

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。

+ +

点击 WebGL tutorial 获取更多资料,例子,和关于如何开始WebGL编程的知识。

+ +
+

补充:以下内容很多函数都没有提供参数,所以最好还是参见具体API。

+
+ +

常量

+ +

请参考 WebGL constants 。

+ +

WebGL上下文

+ +

以下的属性和方法提供只读的关于上下文的信息:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
只读属性,对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素,值将会为 {{jsxref("null")}}。
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

如果上下文没有指定的canvas,把帧交给原始的{{domxref("HTMLCanvasElement")}}元素。

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
只读属性,当前绘图缓冲区的宽度,等于和该上下文相联系的 canvas 元素的宽度。
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
只读属性,当前绘图缓冲区的高度,等于和该上下文相联系的 canvas 元素的高度。
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
返回 WebGLContextAttributes 对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回 {{jsxref("null")}}。
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
如果上下文丢失,返回true;否则,返回 false。
+
+ +

视野和裁剪

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
设置裁剪框。
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
设置视口。
+
+ +

状态信息

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
选择要激活的纹理单元。
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
设置源和目标的混和因子。
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
分开设置 RGB 混和表达式和 alpha 混和表达式。
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
定义用于像素混合算法的函数。
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
分别定义混合像素RGB通道和透明通道的函数。
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
设置用于清空用的颜色。
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
设置清除深度缓存时的深度值。
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
设置清除模板缓冲区时的模板值。
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
设置在绘制或渲染{{domxref("WebGLFramebuffer")}}时要开启或关闭的颜色分量。
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
设置多边形的正面和/或反面是否要被排除。
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
设置比较输入像素深度和深度缓存值得函数。
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
设置是否写入深度缓存。
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
+
{{domxref("WebGLRenderingContext.disable()")}}
+
禁用这个上下文的WebGL功能。
+
{{domxref("WebGLRenderingContext.enable()")}}
+
启用这个上下文的WebGL功能。
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
设置多边形的正面使用顺时针还是逆时针绘制表示。
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
返回给入参数名的值。
+
{{domxref("WebGLRenderingContext.getError()")}}
+
返回错误信息。
+
{{domxref("WebGLRenderingContext.hint()")}}
+
给某些行为设置建议使用的模式。具体建议需要看执行的情况。
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
测试这个上下文的WebGL功能是否开启。
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
设置线宽。
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
设置像素存储模式。
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
设置多边形偏移的比例和单位,从而计算深度值。(补充:解决深度冲突)
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
为抗锯齿效果设置多重取样覆盖参数。
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
同时设置前面和背面的模板测试函数,及其引用值。
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
可分开设置前面或背面的模板测试函数,及其引用值。
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
同时启用或禁用,前面和背面的模板测试掩码。
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
可分开启用或禁用,前面和背面的模板测试掩码。
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
同时设置,在前面和背面的模板缓冲区上执行的操作。
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
可分开设置,在前面和背面的模板缓冲区上执行的操作。
+
+ +

缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
把 WebGLBuffer 对象绑定到指定目标上。
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
更新缓冲数据。
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
更新从给入偏移量开始的缓冲数据。
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
创建 WebGLBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
删除 WebGLBuffer 对象。
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
返回缓冲信息。
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
返回给入的缓冲是否有效。
+
+ +

帧缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
把 WebGLFrameBuffer 对象绑定到指定对象上。
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
返回帧缓冲区的状态。
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
创建 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
删除 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
把 WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
把纹理图像附加到 WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
返回帧缓冲区的信息。
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
返回 Boolean 值,表示给入的 WebGLFrameBuffer 对象是否有效。
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
读取 WebGLFrameBuffer 的像素。
+
+ +

渲染缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
把 WebGLRenderBuffer 对象绑定到指定的对象上。
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
创建 WebGLRenderBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
删除 WebGLRenderBuffer 对象。
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
返回渲染缓冲区的信息。
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
返回 Boolean 值,表示给入的 WebGLRenderingBuffer 是否有效。
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
创建渲染缓冲区数据存储。
+
+ +

纹理

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
把 WebGLTexture 对象绑定到指定对象上。
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
指定一个为压缩格式的2D纹理图片。
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
指定一个为压缩格式的2D纹理子图片。
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
复制2D纹理图片。
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
复制2D纹理子图片。
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
创建 WebGLTexture 对象。
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
删除 WebGLTexture 对象。
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
为 WebGLTexture 对象生成一组纹理映射。
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
返回纹理信息。
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
返回 Boolean 值,表示给入的 WebGLTexture 是否有效。
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
指定2D纹理图片。
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
更新当前 WebGLTexture 的子矩形。
+
{{domxref("WebGLRenderingContext.texParameterf()")}}
+
设置纹理参数。
+
{{domxref("WebGLRenderingContext.texParameteri()")}}
+
设置纹理参数。
+
+ +

程序对象和着色器对象

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
把 WebGLShader 添加到 WebGLProgram。
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
绑定一个普通顶点索引到一个命名的attribute 变量
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
编译 WebGLShader。
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
创建 WebGLProgram。
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
创建 WebGLShader。
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
删除 WebGLProgram。
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
删除 WebGLShader。
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
分离 WebGLShader。
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
返回程序对象的信息。
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
返回 WebGLProgram 对象的信息日志。
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
返回着色器的信息。
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
返回 WebGLShader 对象的信息日志。
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
以字符串形式返回 WebGLShader 的源码。
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
返回一个 Boolean 值,表示给入的 WebGLProgram 是否有效。
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
返回一个 Boolean 值,表示给入的 WebGLShader 是否有效。
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
链接给入的 WebGLProgram 对象。
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
设置一个 WebGLShader 的源码。
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
使用指定的 WebGLProgram 作为当前渲染状态的一部分。
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
使 WebGLProgram 生效。
+
+ +

Uniform 和 Attribute

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
在给定的位置,禁用顶点attribute数组。
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
在给定的位置,启用顶点attribute数组。
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
返回激活状态的attribute变量信息。
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
返回激活状态的uniform 变量信息。
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
返回attribute变量的指针位置。
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
返回指定位置的uniform 变量。
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
返回uniform 变量的指针位置。
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
返回指定位置的顶点attribute变量。
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
获取给定索引的顶点attribute位置。
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
指定一个uniform变量。
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
指定一个uniform矩阵变量。
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
指定一个普通顶点attribute的值。
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
指定一个顶点attributes 数组中,顶点attributes 变量的数据格式和位置。
+
+ +

绘制缓冲区

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
把指定的缓冲区清空为预设的值。
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
渲染数组中的原始数据。
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
渲染元素数组中的原始数据。
+
{{domxref("WebGLRenderingContext.finish()")}}
+
阻断执行,直到之前所有的操作都完成。
+
{{domxref("WebGLRenderingContext.flush()")}}
+
清空缓冲的命令,这会导致所有命令尽快执行完。
+
+ +

使用扩展插件

+ +

这些方法管理 WebGL 扩展:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ,每个元素都为支持的WebGL扩展。
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
返回一个扩展对象。
+
+ +

示例

+ +

检测 WebGL 上下文特性支持

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Canvas 尺寸对使用 WebGL 渲染的影响

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}原始定义
+ +

浏览器兼容性

+ +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html new file mode 100644 index 0000000000..dfe9026b22 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html @@ -0,0 +1,124 @@ +--- +title: WebGLRenderingContext.isBuffer() +slug: Web/API/WebGLRenderingContext/isBuffer +translation_of: Web/API/WebGLRenderingContext/isBuffer +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.isBuffer() 是 WebGL API 的方法之一。如果传递的 {{domxref("WebGLBuffer")}} 有效则返回 true,否则返回 false。

+ +

句法

+ +
GLboolean gl.isBuffer(buffer);
+
+ +

参数

+ +
+
buffer (缓冲区)
+
需要检查的 {{domxref("WebGLBuffer")}} 。
+
+ +

返回值

+ +

{{domxref("GLboolean")}} 指示 buffer 是否可用。

+ +

示例

+ +

创建一个缓冲区 (buffer)

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+var buffer = gl.createBuffer();
+
+gl.isBuffer(buffer);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.5", "isBuffer")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}12{{CompatGeckoDesktop("2.0")}}11{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html new file mode 100644 index 0000000000..d8135d7364 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html @@ -0,0 +1,58 @@ +--- +title: WebGLRenderingContext.isContextLost() +slug: Web/API/WebGLRenderingContext/isContextLost +tags: + - WebGL上下文丢失 +translation_of: Web/API/WebGLRenderingContext/isContextLost +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.isContextLost() 方法返回一个{{jsxref("Boolean")}} 标记WebGL的上下文是否已经丢失。

+ +

语法

+ +
gl.isContextLost();
+ +

返回值

+ +

 {{jsxref("Boolean")}}。如果上下文丢失则返回true,否则返回false。

+ +

样例

+ +

比如,当检查程序链接成功时,你也可以检查是否上下文已经丢失。

+ +
gl.linkProgram(program);
+
+if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) {
+  var info = gl.getProgramInfoLog(program);
+  console.log('Error linking program:\n' + info);
+}
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebGL", "#5.14.13", "WebGLRenderingContext.isContextLost")}}{{Spec2("WebGL")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.isContextLost")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html new file mode 100644 index 0000000000..9c87ead999 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html @@ -0,0 +1,193 @@ +--- +title: WebGLRenderingContext.isEnabled() +slug: Web/API/WebGLRenderingContext/isEnabled +translation_of: Web/API/WebGLRenderingContext/isEnabled +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.isEnabled()WebGL API 方法之一,用来检测给定的 WebGL 功能项在当前上下文是否可用。

+ +

默认的,除了 gl.DITHER,所有的功能项都是未启用的。

+ +

句法

+ +
void gl.isEnabled(cap);
+
+ +

参数

+ +
+
cap
+
{{domxref("GLenum")}} 指定待检测的 WebGL 功能项。可能的值有:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
gl.BLENDBlending of the computed fragment color values. See {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACECulling of polygons. See {{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TESTDepth comparisons and updates to the depth buffer. See {{domxref("WebGLRenderingContext.depthFunc()")}}.
gl.DITHERDithering of color components before they get written to the color buffer.
gl.POLYGON_OFFSET_FILLAdding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.
gl.SAMPLE_ALPHA_TO_COVERAGEComputation of a temporary coverage value determined by the alpha value.
gl.SAMPLE_COVERAGEANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.
gl.SCISSOR_TESTScissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.
gl.STENCIL_TESTStencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.
+ 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 的时候,下列附加的值也是可选用的。 + + + + + + + + + + + + + + +
ConstantDescription
gl.RASTERIZER_DISCARDPrimitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. gl.clear() commands are ignored.
+
+
+ +

返回值

+ +

{{domxref("GLboolean")}} 指示能力项 cap 可用 (true),不可用 (false)。

+ +

示例

+ +
gl.isEnabled(gl.STENCIL_TEST);
+// false
+
+ +

启用或停用给定的能力项,使用 {{domxref("WebGLRenderingContext.enable()")}} 方法和 {{domxref("WebGLRenderingContext.disable()")}} 方法:

+ +
gl.enable(gl.STENCIL_TEST);
+gl.disable(gl.STENCIL_TEST);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "isEnabled")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('OpenGL ES 2.0', "glIsEnabled.xml", "glIsEnabled")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL ES 2.0 API.
{{SpecName('WebGL2', "#3.7.2", "isEnabled")}}{{Spec2('WebGL2')}}Updated definition for WebGL 2.
{{SpecName('OpenGL ES 3.0', "glIsEnabled.xhtml", "glIsEnabled")}}{{Spec2('OpenGL ES 3.0')}}Man page of the (similar) OpenGL ES 3.0 API.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html new file mode 100644 index 0000000000..0c272f6188 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.isProgram() +slug: Web/API/WebGLRenderingContext/isProgram +translation_of: Web/API/WebGLRenderingContext/isProgram +--- +

{{APIRef("WebGL")}}

+ +

 WebGL API中的WebGLRenderingContext.isProgram() 函数 将会在{{domxref("WebGLProgram")}}是一个合法的着色器程序(program)时返回 true , 而在其他情况返回false

+ +

语法

+ +
GLboolean gl.isProgram(program);
+
+ +

参数

+ +
+
program
+
一个要检查的 {{domxref("WebGLProgram")}}对象 .
+
+ +

返回值

+ +

一个表示program是否有效的 {{domxref("GLboolean")}} 值.

+ +

示例

+ +

检查一个program是否有效

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var program = gl.createProgram();
+
+// ...
+
+gl.isProgram(program);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "isProgram")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glIsProgram.xml", "glIsProgram")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.isProgram")}}

+ +

另请参见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html new file mode 100644 index 0000000000..b0a5c10de4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html @@ -0,0 +1,78 @@ +--- +title: WebGLRenderingContext.isShader() +slug: Web/API/WebGLRenderingContext/isShader +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/isShader +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 中的 WebGLRenderingContext.isShader() 方法,在传入的 {{domxref("WebGLShader")}} 有效时返回 true ,否则返回 false

+ +

语法

+ +
GLboolean gl.isShader(shader);
+
+ +

参数

+ +
+
shader
+
需要校验的 {{domxref("WebGLShader")}} 
+
+ +

返回值

+ +

用来表明 shader 是否有效的 {{domxref("GLboolean")}} 对象

+ +

示例

+ +

校验一个 Shader

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var shader = gl.createShader(gl.VERTEX_SHADER);
+
+// ...
+
+gl.isShader(shader);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "isShader")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glIsShader.xml", "glIsShader")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.isShader")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html new file mode 100644 index 0000000000..86d850ebff --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html @@ -0,0 +1,78 @@ +--- +title: WebGLRenderingContext.linkProgram() +slug: Web/API/WebGLRenderingContext/linkProgram +translation_of: Web/API/WebGLRenderingContext/linkProgram +--- +
{{APIRef("WebGL")}}
+{{domxref("WebGLRenderingContext")}} 接口的linkProgram()方法链接给定的{{domxref("WebGLProgram")}},从而完成为程序的片元和顶点着色器准备GPU代码的过程。
+ +

语法

+ +
void gl.linkProgram(program);
+
+ +

参数

+ +
+
program
+
一个用于链接的 {{domxref("WebGLProgram")}} 。
+
+ +

返回值

+ +

None.

+ +

例子

+ +
var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw new Error('Could not compile WebGL program. \n\n' + info);
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "linkProgram")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.linkProgram")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html new file mode 100644 index 0000000000..1a84fa6f9a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html @@ -0,0 +1,233 @@ +--- +title: WebGLRenderingContext.pixelStorei() +slug: Web/API/WebGLRenderingContext/pixelStorei +translation_of: Web/API/WebGLRenderingContext/pixelStorei +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.pixelStorei() 是 WebGL API 中用于图像预处理的函数。

+ +

语法

+ +
void gl.pixelStorei(pname, param);
+
+ +

参数

+ +
+
pname
+
 {{domxref("Glenum")}} 类型 ,表示处理的方式。关于该参数可选值,请见下面表格。
+
param
+
 {{domxref("GLint")}}  类型,表示 pname 处理方式的参数。关于该参数可选值,请见下面表格。
+
+ +

返回值

+ +

None.

+ +

像素存储参数

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
模式名称 (pname)描述类型默认值 param 的可选值Specified in
gl.PACK_ALIGNMENTPacking of pixel data into memory{{domxref("GLint")}}41, 2, 4, 8OpenGL ES 2.0
gl.UNPACK_ALIGNMENTUnpacking of pixel data from memory.{{domxref("GLint")}}41, 2, 4, 8OpenGL ES 2.0
gl.UNPACK_FLIP_Y_WEBGL +

如果为true,则把图片上下对称翻转坐标轴(图片本身不变)。

+
{{domxref("GLboolean")}}falsetrue, falseWebGL
gl.UNPACK_PREMULTIPLY_ALPHA_WEBGLMultiplies the alpha channel into the other color channels{{domxref("GLboolean")}}falsetrue, falseWebGL
gl.UNPACK_COLORSPACE_CONVERSION_WEBGLDefault color space conversion or no color space conversion.{{domxref("GLenum")}}gl.BROWSER_DEFAULT_WEBGLgl.BROWSER_DEFAULT_WEBGL, gl.NONEWebGL
+ +

When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescriptionTypeDefault valueAllowed values (for param)Specified in
gl.PACK_ROW_LENGTHNumber of pixels in a row.{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.PACK_SKIP_PIXELSNumber of pixel locations skipped before the first pixel is written into memory.{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.PACK_SKIP_ROWSNumber of rows of pixel locations skipped before the first pixel is written into memory{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.UNPACK_ROW_LENGTHNumber of pixels in a row.{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.UNPACK_IMAGE_HEIGHTImage height used for reading pixel data from memory{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.UNPACK_SKIP_PIXELSNumber of pixel images skipped before the first pixel is read from memory{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.UNPACK_SKIP_ROWSNumber of rows of pixel locations skipped before the first pixel is read from memory{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
gl.UNPACK_SKIP_IMAGESNumber of pixel images skipped before the first pixel is read from memory{{domxref("GLint")}}00 to InfinityOpenGL ES 3.0
+ +

Examples

+ +

Setting the pixel storage mode affects the {{domxref("WebGLRenderingContext.readPixels()")}} operations, as well as unpacking of textures with the {{domxref("WebGLRenderingContext.texImage2D()")}} and {{domxref("WebGLRenderingContext.texSubImage2D()")}} methods.
+  

+ +
var tex = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, tex);
+gl.pixelStorei(gl.PACK_ALIGNMENT, 4);
+
+ +

To check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with {{domxref("WebGLRenderingContext.getParameter()")}}.

+ +
gl.getParameter(gl.PACK_ALIGNMENT);
+gl.getParameter(gl.UNPACK_ALIGNMENT);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "pixelStorei")}}{{Spec2('WebGL')}}Initial definition for WebGL.
{{SpecName('WebGL', "#PIXEL_STORAGE_PARAMETERS", "Pixel Storage Parameters")}}{{Spec2('WebGL')}}Additional pixel storage parameters that aren't specified in OpenGL.
{{SpecName('OpenGL ES 2.0', "glPixelStorei.xml", "glPixelStorei")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL ES 2.0 API.
{{SpecName('WebGL2', "#3.7.2", "pixelStorei")}}{{Spec2('WebGL2')}}Updated definition for WebGL 2.
{{SpecName('OpenGL ES 3.0', "glPixelStorei.xhtml", "glPixelStorei")}}{{Spec2('OpenGL ES 3.0')}}Man page of the OpenGL ES 3.0 API.
+ +

Browser compatibility

+ + + +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.pixelStorei")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html new file mode 100644 index 0000000000..60057a8809 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html @@ -0,0 +1,155 @@ +--- +title: WebGLRenderingContext.renderbufferStorage() +slug: Web/API/WebGLRenderingContext/renderbufferStorage +translation_of: Web/API/WebGLRenderingContext/renderbufferStorage +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.renderbufferStorage() 方法用来创建和初始化一个渲染缓冲区对象的数据存储.

+ +

语法

+ +
void gl.renderbufferStorage(target, internalFormat, width, height);
+
+ +

参数

+ +
+
target
+
 {{domxref("Glenum")}} 指定一个渲染缓冲区对象. 可能的值: +
    +
  • gl.RENDERBUFFER:单一图像的缓冲数据存储在一个可渲染的内部格式。
    + .
  • +
+
+
internalFormat
+
 {{domxref("Glenum")}} 指定渲染缓冲区的内部格式. 可能的值: +
    +
  • gl.RGBA4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
  • +
  • gl.RGB565: 5 red bits, 6 green bits, 5 blue bits.
  • +
  • gl.RGB5_A1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
  • +
  • gl.DEPTH_COMPONENT16: 16 depth bits.
  • +
  • gl.STENCIL_INDEX8: 8 stencil bits.
  • +
  • gl.DEPTH_STENCIL
  • +
  • 当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时, 下面的值也是可用的: +
      +
    • gl.R8
    • +
    • gl.R8UI
    • +
    • gl.R8I
    • +
    • gl.R16UI
    • +
    • gl.R16I
    • +
    • gl.R32UI
    • +
    • gl.R32I
    • +
    • gl.RG8
    • +
    • gl.RG8UI
    • +
    • gl.RG8I
    • +
    • gl.RG16UI
    • +
    • gl.RG16I
    • +
    • gl.RG32UI
    • +
    • gl.RG32I
    • +
    • gl.RGB8
    • +
    • gl.RGBA8
    • +
    • gl.SRGB8_ALPHA8 (也可以作为WebGL 1的扩展,参见下面)
    • +
    • gl.RGB10_A2
    • +
    • gl.RGBA8UI
    • +
    • gl.RGBA8I
    • +
    • gl.RGB10_A2UI
    • +
    • gl.RGBA16UI
    • +
    • gl.RGBA16I
    • +
    • gl.RGBA32I
    • +
    • gl.RGBA32UI
    • +
    • gl.DEPTH_COMPONENT24
    • +
    • gl.DEPTH_COMPONENT32F
    • +
    • gl.DEPTH24_STENCIL8
    • +
    • gl.DEPTH32F_STENCIL8
    • +
    +
  • +
  • 当使用{domxref("WEBGL_color_buffer_float")}} 扩展: +
      +
    • ext.RGBA32F_EXT: RGBA 32-bit 浮点类型.
    • +
    • ext.RGB32F_EXT: RGB 32-bit 浮点类型.
    • +
    +
  • +
  • 当使用{domxref("EXT_sRGB")}} 扩展: +
      +
    • ext.SRGB8_ALPHA8_EXT: 8-bit sRGB 和 alpha.
    • +
    +
  • +
  • 当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 和 {{domxref("EXT_color_buffer_float")}} 扩展: +
      +
    • gl.R16F
    • +
    • gl.RG16F
    • +
    • gl.RGBA16F
    • +
    • gl.R32F
    • +
    • gl.RG32F
    • +
    • gl.RGBA32F
    • +
    • gl.R11F_G11F_B10F
    • +
    +
  • +
+
+
width
+
 {{domxref("GLsizei")}} 指定渲染缓冲区的宽度(以像素为单位).
+
height
+
 {{domxref("GLsizei")}} 指定渲染缓冲区的高度(以像素为单位).
+
+ +

返回值

+ +

None.

+ +

示例

+ +
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, 256, 256);
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.7", "renderbufferStorage")}}{{Spec2('WebGL')}}WebGL初始定义.
{{SpecName('OpenGL ES 2.0', "glRenderbufferStorage.xml", "glRenderbufferStorage")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2 API手册.
{{SpecName('WebGL2', "#3.7.5", "getRenderbufferParameter")}}{{Spec2('WebGL2')}}WebGL 2更新定义.
{{SpecName('OpenGL ES 3.0', "glRenderbufferStorage.xhtml", "glRenderbufferStorage")}}{{Spec2('OpenGL ES 3.0')}} OpenGL ES 3 API手册(类似).
+ 添加许多新的内部格式.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.renderbufferStorage")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html new file mode 100644 index 0000000000..87c080f3ba --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html @@ -0,0 +1,94 @@ +--- +title: WebGLRenderingContext.scissor() +slug: Web/API/WebGLRenderingContext/scissor +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/scissor +--- +
{{APIRef("WebGL")}}
+ +

 WebGLRenderingContext.scissor() 方法指定了一个裁剪区域,用来将绘图区域限制在其限定的盒形区域内。

+ +

语法

+ +
void gl.scissor(x, y, width, height);
+
+ +

参数

+ +
+
x
+
{{domxref("GLint")}} ,指定盒形裁剪区域左下角所在的横坐标,默认为 0。
+
y
+
 {{domxref("GLint")}} 指定盒形裁剪区域左下角的纵坐标,默认为 0。
+
width
+
{{domxref("Glsizei")}},用来确定盒型裁剪区域宽度的非负数,默认为 canvas 的宽度。
+
height
+
{{domxref("Glsizei")}} ,用以指定盒形裁剪区域高度的非负数,默认为canvas 的高度。
+
+ +

返回值

+ +

无。

+ +

抛错

+ +

宽或高为负值时,抛出  gl.INVALID_VALUE 错误。

+ +

示例

+ +

当裁剪区域可用的时候,只有处于此区域内的像素才能由绘图命令修改。

+ +
// turn on scissor test
+gl.enable(gl.SCISSOR_TEST);
+
+// set the scissor rectangle
+gl.scissor(x, y, width, height);
+
+// execute drawing commands in the scissor box (e.g. clear)
+
+// turn off scissor test again
+gl.disable(gl.SCISSOR_TEST);
+
+ +

通过查询 SCISSOR_BOX 常量来获取裁剪区域的维度信息,返回值是一个 {{jsxref("Int32Array")}} 对象。

+ +
gl.scissor(0, 0, 200, 200);
+gl.getParameter(gl.SCISSOR_BOX);
+// Int32Array[0, 0, 200, 200]
+ +

标准

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.4", "scissor")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glScissor.xml", "glScissor")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.scissor")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html new file mode 100644 index 0000000000..3527279b63 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 中的 WebGLRenderingContext.shaderSource() 方法用于设置 {{domxref("WebGLShader")}} 着色器(顶点着色器及片元着色器)的GLSL程序代码。

+ +

语法

+ +
void gl.shaderSource(shader, source);
+
+ +

参数

+ +
+
shader
+
用于设置程序代码的 {{domxref("WebGLShader")}} (着色器对象)。
+
source
+
包含GLSL程序代码的字符串。
+
+ +

返回值

+ +

None.

+ +

示例

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+ +

文档规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "shaderSource")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}{{Spec2('OpenGL ES 2.0')}}Man page of the (similar) OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.shaderSource")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html new file mode 100644 index 0000000000..fb578ac252 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html @@ -0,0 +1,872 @@ +--- +title: WebGLRenderingContext.texImage2D() +slug: Web/API/WebGLRenderingContext/texImage2D +translation_of: Web/API/WebGLRenderingContext/texImage2D +--- +
{{APIRef("WebGL")}}
+ +

WebGL API WebGLRenderingContext.texImage2D() 方法指定了二维纹理图像。

+ +

语法

+ +
// WebGL1:
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
+void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels);
+void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels);
+void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels);
+void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels);
+void gl.texImage2D(target, level, internalformat, format, type, ImageBitmap? pixels);
+
+// WebGL2:
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, GLintptr offset);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLCanvasElement source);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLImageElement source);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLVideoElement source);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageBitmap source);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageData source);
+void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView srcData, srcOffset);
+
+ +

参数

+ +
+
target
+
 {{domxref("GLenum")}} 指定纹理的绑定对象.可能的值: +
    +
  • gl.TEXTURE_2D: 二维纹理贴图.
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X:立方体映射纹理的正X面。
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X: 立方体映射纹理的负X面。
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y: 立方体映射纹理的正Y面。
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y: 立方体映射纹理的负Y面。
  • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z: 立方体映射纹理的正Z面。
  • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z: 立方体映射纹理的负Z面。
  • +
+
+
level
+
 {{domxref("GLint")}} 指定详细级别. 0级是基本图像等级,n级是第n个金字塔简化级.
+
internalformat
+
 {{domxref("GLenum")}} 指定纹理中的颜色组件.
+
在 WebGL1 和 WebGL2 中可能的值:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FormatTypeChannelsBytes per pixel
RGBAUNSIGNED_BYTE44
RGBUNSIGNED_BYTE33
RGBAUNSIGNED_SHORT_4_4_4_442
RGBAUNSIGNED_SHORT_5_5_5_142
RGBUNSIGNED_SHORT_5_6_532
LUMINANCE_ALPHAUNSIGNED_BYTE22
LUMINANCEUNSIGNED_BYTE11
ALPHAUNSIGNED_BYTE11
+
+
在WebGL2 中,对带有 ArrayBufferView 或 GLintptr offset的  texImage2D 版本,其它可能的值
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sized
+ Format
Base
+ Format
R
+ bits
G
+ bits
B
+ bits
A
+ bits
Shared
+ bits
Color
+ renderable
Texture
+ filterable
R8RED8
R8_SNORMREDs8
RG8RG88
RG8_SNORMRGs8s8
RGB8RGB888
RGB8_SNORMRGBs8s8s8
RGB565RGB565
RGBA4RGBA4444
RGB5_A1RGBA5551
RGBA8RGBA8888
RGBA8_SNORMRGBAs8s8s8s8
RGB10_A2RGBA1010102
RGB10_A2UIRGBAui10ui10ui10ui2
SRGB8RGB888
SRGB8_ALPHA8RGBA8888
R16FREDf16
RG16FRGf16f16
RGB16FRGBf16f16f16
RGBA16FRGBAf16f16f16f16
R32FREDf32
RG32FRGf32f32
RGB32FRGBf32f32f32
RGBA32FRGBAf32f32f32f32
R11F_G11F_B10FRGBf11f11f10
RGB9_E5RGB9995
R8IREDi8
R8UIREDui8
R16IREDi16
R16UIREDui16
R32IREDi32
R32UIREDui32
RG8IRGi8i8
RG8UIRGui8ui8
RG16IRGi16i16
RG16UIRGui16ui16
RG32IRGi32i32
RG32UIRGui32ui32
RGB8IRGBi8i8i8
RGB8UIRGBui8ui8ui8
RGB16IRGBi16i16i16
RGB16UIRGBui16ui16ui16
RGB32IRGBi32i32i32
RGB32UIRGBui32ui32ui32
RGBA8IRGBAi8i8i8i8
RGBA8UIRGBAui8ui8ui8ui8
RGBA16IRGBAi16i16i16i16
RGBA16UIRGBAui16ui16ui16ui16
RGBA32IRGBAi32i32i32i32
RGBA32UIRGBAui32ui32ui32ui32
+ +
+
+


+  在WebGL2 中,使用HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap, 或 ImageData作为texImage2D 纹理的版本中,可能的值有:

+ +
    +
  • gl.ALPHA: 抛弃红色、绿色和蓝色组件并读取alpha组件。
  • +
  • gl.RGB:抛弃alpha组件,读取红色、绿色和蓝色组件。
  • +
  • gl.RGBA: 从颜色缓冲区读取红色、绿色、蓝色和alpha组件。
  • +
  • gl.LUMINANCE: E每个颜色组件是一个亮度组件,alpha值为1.0。
  • +
  • gl.LUMINANCE_ALPHA: 每个组件都是亮度/alpha组件。
  • +
  • 当时用 {{domxref("WEBGL_depth_texture")}} 扩展: +
      +
    • gl.DEPTH_COMPONENT
    • +
    • gl.DEPTH_STENCIL
    • +
    +
  • +
  • 当时用 {{domxref("EXT_sRGB")}} 扩展: +
      +
    • ext.SRGB_EXT
    • +
    • ext.SRGB_ALPHA_EXT
    • +
    +
  • +
  • 当时用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, 另外还提供以下值: +
      +
    • gl.R8
    • +
    • gl.R16F
    • +
    • gl.R32F
    • +
    • gl.R8UI
    • +
    • gl.RG8
    • +
    • gl.RG16F
    • +
    • gl.RG32F
    • +
    • gl.RG8UI
    • +
    • gl.RG16UI
    • +
    • gl.RG32UI
    • +
    • gl.RGB8
    • +
    • gl.SRGB8
    • +
    • gl.RGB565
    • +
    • gl.R11F_G11F_B10F
    • +
    • gl.RGB9_E5
    • +
    • gl.RGB16F
    • +
    • gl.RGB32F
    • +
    • gl.RGB8UI
    • +
    • gl.RGBA8
    • +
    • gl.SRGB8_ALPHA8
    • +
    • gl.RGB5_A1
    • +
    • gl.RGB10_A2
    • +
    • gl.RGBA4
    • +
    • gl.RGBA16F
    • +
    • gl.RGBA32F
    • +
    • gl.RGBA8UI
    • +
    +
  • +
+
+
width
+
 {{domxref("GLsizei")}} 指定纹理的宽度。
+
height
+
{{domxref("GLsizei")}} 指定纹理的高度
+
border
+
{{domxref("GLint")}} 指定纹理的边框宽度。必须为 0。
+
format
+
 {{domxref("GLenum")}} 指定texel数据格式。在 WebGL 1中,它必须与 internalformat 相同(查看上面). 在WebGL 2中, 这张表中列出了这些组合。
+
type
+
 {{domxref("GLenum")}} 指定texel数据的数据类型。可能的值: +
    +
  • gl.UNSIGNED_BYTE:  gl.RGBA每个通道8位
  • +
  • gl.UNSIGNED_SHORT_5_6_5: 5 bits红, 6 bits绿, 5 bits蓝
  • +
  • gl.UNSIGNED_SHORT_4_4_4_4: 4 bits红, 4 bits绿, 4 bits蓝, 4 alpha bits.
  • +
  • gl.UNSIGNED_SHORT_5_5_5_1: 5 bits红, 5 bits绿, 5 bits蓝, 1 alpha bit.
  • +
  • 当使用 {{domxref("WEBGL_depth_texture")}} 扩展: +
      +
    • gl.UNSIGNED_SHORT
    • +
    • gl.UNSIGNED_INT
    • +
    • ext.UNSIGNED_INT_24_8_WEBGL (constant provided by the extension)
    • +
    +
  • +
  • 当使用 {{domxref("OES_texture_float")}}扩展 : +
      +
    • gl.FLOAT
    • +
    +
  • +
  • 当使用 {{domxref("OES_texture_half_float")}} 扩展: +
      +
    • ext.HALF_FLOAT_OES (constant provided by the extension)
    • +
    +
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}},下面的值也是可用的: +
      +
    • gl.BYTE
    • +
    • gl.UNSIGNED_SHORT
    • +
    • gl.SHORT
    • +
    • gl.UNSIGNED_INT
    • +
    • gl.INT
    • +
    • gl.HALF_FLOAT
    • +
    • gl.FLOAT
    • +
    • gl.UNSIGNED_INT_2_10_10_10_REV
    • +
    • gl.UNSIGNED_INT_10F_11F_11F_REV
    • +
    • gl.UNSIGNED_INT_5_9_9_9_REV
    • +
    • gl.UNSIGNED_INT_24_8
    • +
    • gl.FLOAT_32_UNSIGNED_INT_24_8_REV (pixels must be {{jsxref("null")}})
    • +
    +
  • +
+
+
pixels
+
下列对象之一可以用作纹理的像素源: +
    +
  • {{domxref("ArrayBufferView")}}, +
      +
    • {{jsxref("Uint8Array")}}  如果 type 是 gl.UNSIGNED_BYTE则必须使用
    • +
    • {{jsxref("Uint16Array")}} 如果 typegl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORText.HALF_FLOAT_OES则必须使用
    • +
    •  {{jsxref("Uint32Array")}} 如果type 是 gl.UNSIGNED_INT 或ext.UNSIGNED_INT_24_8_WEBGL则必须使用
    • +
    •  {{jsxref("Float32Array")}} 如果type 是 gl.FLOAT则必须使用
    • +
    +
  • +
  • {{domxref("ImageData")}},
  • +
  • {{domxref("HTMLImageElement")}},
  • +
  • {{domxref("HTMLCanvasElement")}},
  • +
  • {{domxref("HTMLVideoElement")}},
  • +
  • {{domxref("ImageBitmap")}}.
  • +
+
+
offset
+
 {{domxref("GLintptr")}} 类型偏移到 {{domxref("WebGLBuffer")}}的数据存储中。 用于上传数据到当前范围 {{domxref("WebGLTexture")}} 从WebGLBuffer 范围到PIXEL_UNPACK_BUFFER 目标。(仅在WebGL 2中 )
+
+
    +
+
+
+ +

返回值

+ +

None.

+ +

示例

+ +
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.8", "texImage2D")}}{{Spec2('WebGL')}}WebGL.初始定义
{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2.0 API手册(类似).
{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}{{Spec2('WebGL2')}}WebGL更新定义.
{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3.0 API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.texImage2D")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html new file mode 100644 index 0000000000..6d32ac62e4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html @@ -0,0 +1,173 @@ +--- +title: 'WebGLRenderingContext.texParameter[fi]()' +slug: Web/API/WebGLRenderingContext/texParameter +translation_of: Web/API/WebGLRenderingContext/texParameter +--- +
{{APIRef("WebGL")}}
+ +

WebGL API  的WebGLRenderingContext.texParameter[fi]()方法用于设置纹理参数.

+ +

语法

+ +
void gl.texParameterf(GLenum target, GLenum pname, GLfloat param);
+void gl.texParameteri(GLenum target, GLenum pname, GLint param);
+
+ +

参数

+ +
+
target
+
{{domxref("GLenum")}} 指定绑定点(目标)。可能的值:
+
+
    +
  • gl.TEXTURE_2D: 二维纹理.
  • +
  • gl.TEXTURE_CUBE_MAP: 立方体纹理.
  • +
  • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,还可以使用以下值 +
      +
    • gl.TEXTURE_3D: 三维贴图.
    • +
    • gl.TEXTURE_2D_ARRAY: 二维数组贴图.
    • +
    +
  • +
+
+
+ +

pname 参数是 {{domxref("Glenum")}}  指定要设置的纹理参数. param 参数是 {{domxref("GLfloat")}} 或 {{domxref("GLint")}} 已指定的 pname参数的值。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
pname描述参数
Available in WebGL 1
gl.TEXTURE_MAG_FILTER纹理放大滤波器gl.LINEAR (默认值), gl.NEAREST.
gl.TEXTURE_MIN_FILTER纹理缩小滤波器gl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (默认值), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_S纹理坐标水平填充 sgl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_T纹理坐标垂直填充 tgl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
Additionally available when using the {{domxref("EXT_texture_filter_anisotropic")}} extension
ext.TEXTURE_MAX_ANISOTROPY_EXT纹理最大向异性 {{domxref("GLfloat")}} 值.
Additionally available when using a WebGL 2 context
gl.TEXTURE_BASE_LEVEL纹理映射等级任何整型值.
gl.TEXTURE_COMPARE_FUNC纹理对比函数gl.LEQUAL (默认值), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODE纹理对比模式gl.NONE (默认值), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_MAX_LEVEL最大纹理映射数组等级任何整型值.
gl.TEXTURE_MAX_LOD纹理最大细节层次值任何整型值.
gl.TEXTURE_MIN_LOD纹理最小细节层次值任何浮点型值.
gl.TEXTURE_WRAP_R纹理坐标r包装功能gl.REPEAT (默认值), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
+ +

返回值

+ +

INVALID_ENUM target不是合法的值。

+ +

INVALID_OPRATION 当前目标上没有绑定纹理对象。

+ +

示例

+ +
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}{{Spec2('WebGL')}}WebGL初始定义.
{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2.0 API手册(类似).
{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}{{Spec2('WebGL2')}}WebGL更新定义.
{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3.0 API手册(类似).
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.texParameterf")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html new file mode 100644 index 0000000000..d3c65c9b2c --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html @@ -0,0 +1,93 @@ +--- +title: 'WebGLRenderingContext.uniform[1234][fi][v]()' +slug: Web/API/WebGLRenderingContext/uniform +translation_of: Web/API/WebGLRenderingContext/uniform +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的WebGLRenderingContext.uniform[1234][fi][v]() 方法指定了uniform 变量的值。所有在ShaderProgram对象中定义的,且激活的uniform变量在ShaderProgram 执行link成功后被初始化为0。它们将保留通过调用此方法分配给它们的值,直到再次将其初始化为0时,也就是ShaderProgram对象上发生下一次成功的link操作为止。

+ +
+

这里描述的许多函数都扩展了 WebGL 2 接口, 可在以下地址查看 {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.

+
+ +

语法

+ +
void gl.uniform1f(location, v0);
+void gl.uniform1fv(location, value);
+void gl.uniform1i(location, v0);
+void gl.uniform1iv(location, value);
+
+void gl.uniform2f(location, v0, v1);
+void gl.uniform2fv(location, value);
+void gl.uniform2i(location, v0, v1);
+void gl.uniform2iv(location, value);
+
+void gl.uniform3f(location, v0, v1, v2);
+void gl.uniform3fv(location, value);
+void gl.uniform3i(location, v0, v1, v2);
+void gl.uniform3iv(location, value);
+
+void gl.uniform4f(location, v0, v1, v2, v3);
+void gl.uniform4fv(location, value);
+void gl.uniform4i(location, v0, v1, v2, v3);
+void gl.uniform4iv(location, value);
+
+ +

参数

+ +
+
location
+
 {{domxref("WebGLUniformLocation")}} 对象包含了将要修改的uniform 属性位置.
+
value, v0, v1, v2, v3
+
新的值将被用于uniform 变量. 可能的类型: +
    +
  • 浮点值 {{jsxref("Number")}}(方法名跟"f").
  • +
  • 浮点数组 (例如 {{jsxref("Float32Array")}} 或 {{jsxref("Array")}} 的数组) 用于浮点型向量方法 (方法名跟 "fv").
  • +
  • 整型值 {{jsxref("Number")}}  (方法名跟"i").
  • +
  • 整型数组{{jsxref("Int32Array")}} 用于整型向量方法 (方法名跟 "iv").
  • +
+
+
+ +

返回值

+ +

None.

+ +

示例

+ +
gl.uniform1f(u_alpha, 0.8);
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "uniform")}}{{Spec2('WebGL')}}初始定义
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API的主页.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.uniform1f")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html new file mode 100644 index 0000000000..57669ab170 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -0,0 +1,81 @@ +--- +title: 'WebGLRenderingContext.uniformMatrix[234]fv()' +slug: Web/API/WebGLRenderingContext/uniformMatrix +tags: + - WebGL + - WebGLAPI + - WebGLRenderingContext + - uniformMatrix2fv + - uniformMatrix3fv + - uniformMatrix4fv + - 矩阵 +translation_of: Web/API/WebGLRenderingContext/uniformMatrix +--- +
{{APIRef("WebGL")}}
+ +

WebGL API 的WebGLRenderingContext.uniformMatrix[234]fv() 方法为 uniform variables 指定了矩阵值 .

+ +

该方法的3个版本 (uniformMatrix2fv(), uniformMatrix3fv(), 和unifomMatrix4fv()) ,分别以二阶,三阶,和四阶方阵作为输入值,它们应是分别具有4,9,16个浮点数的数组.

+ +

语法

+ +
WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
+WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
+WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
+
+ +

参数

+ +
+
location
+
{{domxref("WebGLUniformLocation")}} 对象包含了要修改的 uniform attribute位置. 位置使用 {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}}获得.
+
transpose
+
{{domxref("GLboolean")}} 指定是否转置矩阵。必须为 false.
+
value
+
+

 {{jsxref("Float32Array")}} 型或者是 GLfloat 序列值.假定值以列主要顺序提供.

+
+
+ +

返回值

+ +

undefined

+ +

示例

+ +
gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html new file mode 100644 index 0000000000..822a0b5684 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.useProgram() +slug: Web/API/WebGLRenderingContext/useProgram +translation_of: Web/API/WebGLRenderingContext/useProgram +--- +
{{APIRef("WebGL")}}
+ +

 WebGLRenderingContext.useProgram() 方法将定义好的{{domxref("WebGLProgram")}} 对象添加到当前的渲染状态中。

+ +

语法

+ +
void gl.useProgram(program);
+
+ +

参数

+ +
+
program
+
需要添加的{{domxref("WebGLProgram")}}对象
+
+ +

返回参数

+ +

无.

+ +

示例

+ +
var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+gl.useProgram(program);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "useProgram")}}{{Spec2('WebGL')}}原始定义.
{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API主页.
+ +

浏览器兼容

+ + + +

{{Compat("api.WebGLRenderingContext.useProgram")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html new file mode 100644 index 0000000000..7139cec259 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html @@ -0,0 +1,88 @@ +--- +title: WebGLRenderingContext.validateProgram() +slug: Web/API/WebGLRenderingContext/validateProgram +tags: + - API + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/validateProgram +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext.validateProgram() 是一种 WebGL API ,主要是用来验证 {{domxref("WebGLProgram")}}。 它在检查 WebGLProgram 程序是否链接成功的同时还会检查其是否能在当前的 WebGL 中使用。

+ +

语法

+ +
void gl.validateProgram(program);
+
+ +

参数

+ +
+
program
+
待验证的 {{domxref("WebGLProgram")}}。
+
+ +

返回值

+ +

None.

+ +

Examples

+ +
var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+gl.validateProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw '不能编译 WebGL 程序. \n\n' + info;
+}
+
+gl.useProgram(program);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.9", "validateProgram")}}{{Spec2('WebGL')}}初次定义.
{{SpecName('OpenGL ES 2.0', "glValidateProgram.xml", "glValidateProgram")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API 的帮助页中.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.validateProgram")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html new file mode 100644 index 0000000000..d511b0c1d8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html @@ -0,0 +1,81 @@ +--- +title: 'WebGLRenderingContext.vertexAttrib[1234]f[v]()' +slug: Web/API/WebGLRenderingContext/vertexAttrib +translation_of: Web/API/WebGLRenderingContext/vertexAttrib +--- +
{{APIRef("WebGL")}}
+ +

 WebGLRenderingContext.vertexAttrib[1234]f[v]() 是 WebGL API 的方法,可以为顶点attibute变量赋值。

+ +

语法

+ +
void gl.vertexAttrib1f(index, v0);
+void gl.vertexAttrib2f(index, v0, v1);
+void gl.vertexAttrib3f(index, v0, v1, v2);
+void gl.vertexAttrib4f(index, v0, v1, v2, v3);
+
+void gl.vertexAttrib1fv(index, value);
+void gl.vertexAttrib2fv(index, value);
+void gl.vertexAttrib3fv(index, value);
+void gl.vertexAttrib4fv(index, value);
+
+ +

Parameters

+ +
+
index
+
 {{domxref("GLuint")}} 类型,指定了待修改顶点attribute变量的存储位置。
+
v0, v1, v2, v3
+
浮点数类型{{jsxref("Number")}},用于设置顶点attibute变量的各分量值。
+
value
+
+

{{jsxref("Float32Array")}} 类型,用于设置顶点attibute变量的向量值。

+
+
+ +

返回值

+ +

无。

+ +

示例

+ +
const a_foobar = gl.getAttribLocation(shaderProgram, 'foobar');
+//either set each component individually:
+gl.vertexAttrib3f(a_foobar, 10.0, 5.0, 2.0);
+//or provide a Float32Array:
+const floatArray = new Float32Array([10.0, 5.0, 2.0]);
+gl.vertexAttrib3fv(a_foobar, floatArray);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "vertexAttrib")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glVertexAttrib.xml", "glVertexAttrib")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.vertexAttrib1f")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html new file mode 100644 index 0000000000..6b0ce373b7 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -0,0 +1,270 @@ +--- +title: WebGLRenderingContext.vertexAttribPointer() +slug: Web/API/WebGLRenderingContext/vertexAttribPointer +translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext.vertexAttribPointer() method of the WebGL API binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute of the current vertex buffer object and specifies its layout.
+ 告诉显卡从当前绑定的缓冲区(bindBuffer()指定的缓冲区)中读取顶点数据。

+ +

 WebGL API 的WebGLRenderingContext.vertexAttribPointer()方法绑定当前缓冲区范围到gl.ARRAY_BUFFER,成为当前顶点缓冲区对象的通用顶点属性并指定它的布局(缓冲区对象中的偏移量)。

+ +

Syntax

+ +
void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+
+ +

Parameters

+ +
+
index
+
A {{domxref("GLuint")}} specifying the index of the vertex attribute that is to be modified.
+ 指定要修改的顶点属性的索引。
+
size
+
A {{domxref("GLint")}} specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.
+ 指定每个顶点属性的组成数量,必须是1,2,3或4。
+
type
+
A {{domxref("GLenum")}} specifying the data type of each component in the array. Possible values:
+ 指定数组中每个元素的数据类型可能是: +
    +
  • gl.BYTE: signed 8-bit integer, with values in [-128, 127]
    + 有符号的8位整数,范围[-128, 127]
  • +
  • gl.SHORT: signed 16-bit integer, with values in [-32768, 32767]
    + 有符号的16位整数,范围[-32768, 32767]
  • +
  • gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255]
    + 无符号的8位整数,范围[0, 255]
  • +
  • gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535]
    + 无符号的16位整数,范围[0, 65535]
  • +
  • gl.FLOAT: 32-bit IEEE floating point number
    + 32位IEEE标准的浮点数
  • +
  • When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:
    + 使用WebGL2版本的还可以使用以下值: +
      +
    • gl.HALF_FLOAT: 16-bit IEEE floating point number
      + 16位IEEE标准的浮点数
    • +
    +
  • +
+
+
normalized
+
A {{domxref("GLboolean")}} specifying whether integer data values should be normalized into a certain range when being casted to a float.
+ 当转换为浮点数时是否应该将整数数值归一化到特定的范围。 +
    +
  • For types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true.
    + 对于类型gl.BYTEgl.SHORT,如果是true则将值归一化为[-1, 1]
  • +
  • For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true.
    + 对于类型gl.UNSIGNED_BYTEgl.UNSIGNED_SHORT,如果是true则将值归一化为[0, 1]
  • +
  • For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect.
    + 对于类型gl.FLOATgl.HALF_FLOAT,此参数无效
  • +
+
+
stride
+
A {{domxref("GLsizei")}} specifying the offset in bytes between the beginning of consecutive vertex attributes. Cannot be larger than 255. If stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but each attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex.
+
一个GLsizei,以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。不能大于255。如果stride为0,则假定该属性是紧密打包的,即不交错属性,每个属性在一个单独的块中,下一个顶点的属性紧跟当前顶点之后。
+
+
offset
+
A {{domxref("GLintptr")}} specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of the byte length of type.
+
{{domxref("GLintptr")}}指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。
+
+ +

Return value

+ +

None.

+ +

Exceptions

+ + + +

Description

+ +

Let's assume we want to render some 3D geometry, and for that we will need to supply our vertices to the Vertex Shader. Each vertex has a few attributes, like position, normal vector, or texture coordinate, that are defined in an {{jsxref("ArrayBuffer")}} and will be supplied to the Vertex Buffer Object (VBO). First, we need to bind the {{domxref("WebGLBuffer")}} we want to use to gl.ARRAY_BUFFER, then, with this method, gl.vertexAttribPointer(), we specify in what order the attributes are stored, and what data type they are in. In addition, we need to include the stride, which is the total byte length of all attributes for one vertex. Also, we have to call {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} to tell WebGL that this attribute should be filled with data from our array buffer.

+ +

Usually, your 3D geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout. However, if you are designing the format yourself, or your geometry is in text files (like Wavefront .obj files) and must be converted into an ArrayBuffer at runtime, you have free choice on how to structure the memory. For highest performance, interleave the attributes and use the smallest data type that still accurately represents your geometry.

+ +

The maximum number of vertex attributes depends on the graphics card, and you can call gl.getParameter(gl.MAX_VERTEX_ATTRIBS) to get this value. On high-end graphics cards, the maximum is 16, on lower-end graphics cards, the value will be lower.

+ +

Attribute index

+ +

For each attribute, you must specify its index. This is independent from the location inside the array buffer, so your attributes can be sent in a different order than how they are stored in the array buffer. You have two options:

+ + + +

Integer attributes

+ +

While the ArrayBuffer can be filled with both integers and floats, the attributes will always be converted to a float when they are sent to the vertex shader. If you need to use integers in your vertex shader code, you can either cast the float back to an integer in the vertex shader (e.g. (int) floatNumber), or use {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} from WebGL2.

+ +

Default attribute values

+ +

The vertex shader code may include a number of attributes, but we don't need to specify the values for each attribute. Instead, we can supply a default value that will be identical for all vertices. We can call {{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}} to tell WebGL to use the default value, while calling {{domxref("WebGLRenderingContext.enableVertexAttribArray()", "gl.enableVertexAttribArray()")}} will read the values from the array buffer as specified with gl.vertexAttribPointer().

+ +

Similarily, if our vertex shader expects e.g. a 4-component attribute with vec4 but in our gl.vertexAttribPointer() call we set the size to 2, then WebGL will set the first two components based on the array buffer, while the third and fourth components are taken from the default value.

+ +

The default value is vec4(0.0, 0.0, 0.0, 1.0) by default but we can specify a different default value with {{domxref("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}.

+ +

For example, your vertex shader may be using a position and a color attribute. Most meshes have the color specified at a per-vertex level, but some meshes are of a uniform shade. For those meshes, it is not necessary to place the same color for each vertex into the array buffer, so you use gl.vertexAttrib4fv() to set a constant color.

+ +

Querying current settings

+ +

You can call {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} and {{domxref("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} to get the current parameters for an attribute, e.g. the data type or whether the attribute should be normalized. Keep in mind that these WebGL functions have a slow performance and it is better to store the state inside your JavaScript application. However, these functions are great for debugging a WebGL context without touching the application code.

+ +

Examples

+ +

This example shows how to send your vertex attributes to the shader program. We use an imaginary data structure where the attributes of each vertex are stored interleaved with a length of 20 bytes per vertex:

+ +
    +
  1. position: We need to store the X, Y and Z coordinates. For highest precision, we use 32-bit floats; in total this uses 12 bytes.
  2. +
  3. normal vector: We need to store the X, Y and Z components of the normal vector, but since precision is not that important, we use 8-bit signed integers. For better performance, we align the data to 32 bits by also storing a fourth zero-valued component, bringing the total size to 4 bytes. Also, we tell WebGL to normalize the values because our normals are always in range [-1, 1].
  4. +
  5. texture coordinate: We need to store the U and V coordinates; for this 16-bit unsigned integers offer enough precision, the total size is 4 bytes. We also tell WebGL to normalize the values to [0, 1].
  6. +
+ +

For example, the following vertex:

+ +
{
+  "position": [1.0, 2.0, 1.5],
+  "normal": [1.0, 0.0, 0.0],
+  "texCoord": [0.5, 0.25]
+}
+
+ +

Will be stored in the array buffer as follows:

+ + + + + + + + + + + + + + + +
00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF
+ +

Creating the array buffer

+ +

First, we dynamically create the array buffer from JSON data using a {{domxref("DataView")}}. Note the use of true because WebGL expects our data to be in little-endian.

+ +
//load geometry with fetch() and Response.json()
+const response = await fetch('assets/geometry.json');
+const vertices = await response.json();
+
+//Create array buffer
+const buffer = new ArrayBuffer(20 * vertices.length);
+//Fill array buffer
+const dv = new DataView(buffer);
+for (let i = 0; i < vertices.length; i++) {
+  dv.setFloat32(20 * i, vertices[i].position[0], true);
+  dv.setFloat32(20 * i + 4, vertices[i].position[1], true);
+  dv.setFloat32(20 * i + 8, vertices[i].position[2], true);
+  dv.setInt8(20 * i + 12, vertices[i].normal[0] * 0x7F);
+  dv.setInt8(20 * i + 13, vertices[i].normal[1] * 0x7F);
+  dv.setInt8(20 * i + 14, vertices[i].normal[2] * 0x7F);
+  dv.setInt8(20 * i + 15, 0);
+  dv.setUint16(20 * i + 16, vertices[i].texCoord[0] * 0xFFFF, true);
+  dv.setUint16(20 * i + 18, vertices[i].texCoord[1] * 0xFFFF, true);
+}
+ +

For higher performance, we could also do the previous JSON to ArrayBuffer conversion on the server-side, e.g. with Node.js. Then we could load the binary file and interpret it as an array buffer:

+ +
const response = await fetch('assets/geometry.bin');
+const buffer = await response.arrayBuffer();
+
+ +

Consume array buffer with WebGL

+ +

First, we create a new Vertex Buffer Object (VBO) and supply it with our array buffer:

+ +
//Bind array buffer to a Vertex Buffer Object
+const vbo = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
+
+ +

Then, we specify the memory layout of the array buffer, either by setting the index ourselves:

+ +
//Describe the layout of the buffer:
+//1. position, not normalized
+gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(0);
+//2. normal vector, normalized to [-1, 1]
+gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(1);
+//3. texture coordinates, normalized to [0, 1]
+gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(2);
+
+//Set the attributes in the vertex shader to the same indices
+gl.bindAttribLocation(shaderProgram, 0, 'position');
+gl.bindAttribLocation(shaderProgram, 1, 'normal');
+gl.bindAttribLocation(shaderProgram, 2, 'texUV');
+//Since the attribute indices have changed, we must re-link the shader
+//Note that this will reset all uniforms that were previously set.
+gl.linkProgram(shaderProgram);
+
+ +

Or we can use the index provided by the graphics card instead of setting the index ourselves; this avoids the re-linking of the shader program.

+ +
const locPosition = gl.getAttribLocation(shaderProgram, 'position');
+gl.vertexAttribPointer(locPosition, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(locPosition);
+
+const locNormal = gl.getAttribLocation(shaderProgram, 'normal');
+gl.vertexAttribPointer(locNormal, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(locNormal);
+
+const locTexUV = gl.getAttribLocation(shaderProgram, 'texUV');
+gl.vertexAttribPointer(locTexUV, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(locTexUV);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html b/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html new file mode 100644 index 0000000000..5ec23528a3 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html @@ -0,0 +1,91 @@ +--- +title: WebGLRenderingContext.viewport() +slug: Web/API/WebGLRenderingContext/viewport +tags: + - WebGL + - viewport +translation_of: Web/API/WebGLRenderingContext/viewport +--- +
{{APIRef("WebGL")}}
+ +

WebGL APIWebGLRenderingContext.viewport() 方法,用来设置视口,即指定从标准设备到窗口坐标的x、y仿射变换。

+ +

语法

+ +
void gl.viewport(x, y, width, height);
+
+ +

参数

+ +
+
x
+
{{domxref("GLint")}},用来设定视口的左下角水平坐标。默认值:0。
+
y
+
{{domxref("GLint")}},用来设定视口的左下角垂直坐标。默认值:0。
+
width
+
非负数{{domxref("Glsizei")}},用来设定视口的宽度。默认值:canvas的宽度。
+
height
+
非负数{{domxref("Glsizei")}},用来设定视口的高度。默认值:canvas的高度。
+
+ +

返回值

+ +

None.

+ +

异常错误

+ +

只要宽度或高度有一个为负值,gl.INVALID_VALUE错误将被抛出。.

+ +

样例

+ +

当你第一次创建WebGL上下文的时候,视口的大小将和canvas的大小是匹配的。然而,如果你重新改变了canvas的大小,你需要告诉WebGL上下文设定新的视口。在这里,你可以使用gl.viewport。

+ +
gl.viewport(0, 0, canvas.width, canvas.height);
+
+ +

视口的宽度和高度的设定范围是依赖于底层如何实现的。如果你要获取这个范围,你可以查询MAX_VIEWPORT_DIMS 常量,它将返回 {{jsxref("Int32Array")}}。

+ +
gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+// e.g. Int32Array[16384, 16384]
+
+ +

如果要获取当前的视口,则可以查询VIEWPORT 常量。

+ +
gl.getParameter(gl.VIEWPORT);
+// e.g. Int32Array[0, 0, 640, 480]
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.4", "viewport")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

浏览器兼容性

+ + + +

{{Compat("api.WebGLRenderingContext.viewport")}}

+ +

另见

+ + diff --git "a/files/zh-cn/web/api/webglrenderingcontext/\345\244\232\350\276\271\345\275\242\345\201\217\347\247\273(polygonoffset)/index.html" "b/files/zh-cn/web/api/webglrenderingcontext/\345\244\232\350\276\271\345\275\242\345\201\217\347\247\273(polygonoffset)/index.html" new file mode 100644 index 0000000000..a62d4aeafa --- /dev/null +++ "b/files/zh-cn/web/api/webglrenderingcontext/\345\244\232\350\276\271\345\275\242\345\201\217\347\247\273(polygonoffset)/index.html" @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.polygonOffset() +slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) +translation_of: Web/API/WebGLRenderingContext/polygonOffset +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext.polygonOffset() method of the WebGL API specifies the scale factors and units to calculate depth values.

+ +

The offset is added before the depth test is performed and before the value is written into the depth buffer.

+ +

语法

+ +
void gl.polygonOffset(factor, units);
+
+ +

参数

+ +
+
factor
+
A {{domxref("GLfloat")}} which sets the scale factor for the variable depth offset for each polygon. 默认值为 0.
+
units
+
A {{domxref("GLfloat")}} which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. 默认值为 0.
+
+ +

返回值

+ +

None.

+ +

例子

+ +

The polygon offset fill is disabled by default. To enable or disable polygon offset fill, use the {{domxref("WebGLRenderingContext.enable", "enable()")}} and {{domxref("WebGLRenderingContext.disable", "disable()")}} methods with the argument gl.POLYGON_OFFSET_FILL.

+ +
gl.enable(gl.POLYGON_OFFSET_FILL);
+gl.polygonOffset(2, 3);
+
+ +

想要查看当前多边形偏移的 factor 或 units, 查询 POLYGON_OFFSET_FACTORPOLYGON_OFFSET_UNITS 的内容即可.

+ +
gl.getParameter(gl.POLYGON_OFFSET_FACTOR); // 2
+gl.getParameter(gl.POLYGON_OFFSET_UNITS);  // 3
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.3", "polygonOffset")}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('OpenGL ES 2.0', "glPolygonOffset.xml", "glPolygonOffset")}}{{Spec2('OpenGL ES 2.0')}}Man page of the OpenGL API.
+ +

Browser compatibility

+ + + +

{{Compat("api.WebGLRenderingContext.polygonOffset")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf