从WebGL2迁移到WebGL着色器

Question

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

我的问题是:是否有替代的WebGL2调用必须实现才能呈现从WebGL移植出来的几何图形？

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输出顶点位置。