從 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來輸出頂點位置。