WebGLProgram

WebGLProgram 属于 WebGL API and is a combination of two compiled WebGLShader s consisting of a vertex shader and a fragment shader (both written in GLSL). To create a WebGLProgram , call the GL context's createProgram() function. After attaching the shader programs using attachShader() , you link them into a usable program. This is shown in the code below.

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 'Could not compile WebGL program. \n\n' + info;
}
					

WebGLShader for information on creating the vertexShader and fragmentShader in the above example.

范例

Using the program

The steps to actually do some work with the program involve telling the GPU to use the program, bind the appropriate data and configuration options, and finally draw something to the screen.

// Use the program
gl.useProgram(program);
// Bind existing attribute data
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
					

Deleting the program

If there is an error linking the program or you wish to delete an existing program, then it is as simple as running WebGLRenderingContext.deleteProgram() . This frees the memory of the linked program.

gl.deleteProgram(program);
					

规范

规范 状态 Comment
WebGL 1.0
The definition of 'WebGLProgram' in that specification.
Recommendation 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
WebGLProgram Chrome 9 Edge 12 Firefox 4 IE 11 Opera 12 Safari 5.1 WebView Android Yes Chrome Android 25 Firefox Android Yes Opera Android 12 Safari iOS 8 Samsung Internet Android 1.5
Available in workers
Chrome No Edge No Firefox 44
Disabled
44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅