MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebGLProgram

这篇翻译不完整。请帮忙从英语翻译这篇文章

WebGLProgram 是 WebGL API 的一部分,它由两个WebGLShaders (webgl着色器)组成,分别为顶点着色器还有片元着色器(两种着色器都是由GLSL语言来写的),WebGLProgram 负责将两个着色器使用在一个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;
}

查看 WebGLShader 了解更多关于顶点着色器和片元着色器在以上例子的应用。

例子

使用着色器程序

着色器程序实际上做了几个步骤,包括告诉GPU来使用这段着色器程序,绑定合适的数据,配置相关选项,最终把图像绘制到屏幕上。

// 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);

删除着色器程序

如果在连接着色器程序的时候有错误,或者你想删除一个已经存在的着色器程序,你可以简单的执行WebGLRenderingContext.deleteProgram(),这就释放了连接着色器程序的内存。

gl.deleteProgram(program);

Specifications

Specification Status Comment
WebGL 1.0
WebGLProgram
Recommendation Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "api/WebGLProgram" to the MDN compatibility data repository.

See also

文档标签和贡献者

 此页面的贡献者: lmx99
 最后编辑者: lmx99,