从 WebGL 迁移到 WebGL2 着色器

Question

我目前正在迁移一些 WebGL 代码以使用 WebGL2 着色器。 我已将着色器更改为 es 300 语法，并系统地将 3D 引擎业务逻辑代码编辑到只有一系列 API 调用的地步，但我无法在渲染器中看到任何输出。 我没有收到任何着色器编译错误，并且清除视口很好，但是我没有看到绘图的任何几何输出。

我的问题是：为了呈现从 WebGL 移植的几何图形，是否必须实现替代的 WebGL2 调用？

GL20.gl = GL20.createContext('ex3-root')
let gl = GL20.gl
gl = WebGLDebugUtils.makeDebugContext(gl, onGLError)

let vShader = gl.createShader(GL20.gl.VERTEX_SHADER)
gl.shaderSource(vShader, 
`#version 300 es

in vec3 a_position;
out vec4 outPosition;

void main() {
    outPosition = vec4(a_position, 1.0);
}`
)
gl.compileShader(vShader)

let fShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fShader, 
`#version 300 es
precision highp float;

out vec4 outColor;

void main() {
    outColor = vec4(1.0, 0.0, 1.0, 1.0);
}`
)
gl.compileShader(fShader)

let program = gl.createProgram()
gl.attachShader(program, vShader)
gl.attachShader(program, fShader)
gl.linkProgram(program)

if(!gl.getProgramParameter( program, gl.LINK_STATUS) ) {
    let info = gl.getProgramInfoLog(program)
    throw 'Could not compile WebGL program. \n' + info
}
gl.useProgram(program)

let vBufferPointer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vBufferPointer)
gl.bufferData(gl.ARRAY_BUFFER, 
    new Float32Array([-0.3, -0.3, 0.5,
                       0.3, -0.3, 0.5,
                       0.3,  0.3, 0.5,
                      -0.3,  0.3, 0.5]),
    gl.STATIC_DRAW)

let iBufferPointer = gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBufferPointer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, 
    new Uint16Array([0, 1, 2,
                     0, 2, 3]),
    gl.STATIC_DRAW)

let positionAttributeLocation = gl.getAttribLocation(program, "a_position")
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 12, 0)
gl.enableVertexAttribArray(positionAttributeLocation)

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
gl.clearColor(0.6, 0.7, 0.8, 1.0)
gl.enable(gl.DEPTH_TEST)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)

gl.bindBuffer(gl.ARRAY_BUFFER, null)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)

Answer 1

在顶点着色器中，您必须使用gl_Position来输出顶点位置。