【发布时间】：2019-08-06 08:16:54
【问题描述】：
我几乎可以手动写出 WebGL2 的完整样板，并且可以正常工作。
const canvas = document.createElement('canvas')
document.body.appendChild(canvas)
const gl = canvas.getContext('webgl2', { antialias: true })
const width = 800
const height = 500
canvas.width = width
canvas.height = height
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(vertexShader, `#version 300 es
in vec3 position;
in vec4 color;
out vec4 thecolor;
void
main() {
gl_Position = vec4(position, 1.0);
thecolor = color;
}
`)
gl.shaderSource(fragmentShader, `#version 300 es
precision mediump float;
in vec4 thecolor;
out vec4 color;
void
main() {
color = thecolor;
}
`)
gl.compileShader(vertexShader)
var success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)
if (!success) throw new Error(gl.getShaderInfoLog(vertexShader))
gl.compileShader(fragmentShader)
var success = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)
if (!success) throw new Error(gl.getShaderInfoLog(fragmentShader))
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)
const positionAttribute = gl.getAttribLocation(program, 'position')
const colorAttribute = gl.getAttribLocation(program, 'color')
gl.viewport(0, 0, width, height)
gl.clearColor(0, 0, 0, 0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
// I don't know what the purpose of this is.
const positionVAO = gl.createVertexArray()
gl.bindVertexArray(positionVAO)
const vertexBuffer = gl.createBuffer()
const indexBuffer = gl.createBuffer()
const vertexArray = [
// don't know how to structure this on my own.
]
const indexArray = [
// don't know how to structure this either.
]
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexArray), gl.DYNAMIC_DRAW)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), gl.STATIC_DRAW)
gl.enableVertexAttribArray(positionAttribute)
gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(colorAttribute)
gl.vertexAttribPointer(colorAttribute, 4, gl.FLOAT, false, 0, 0)
gl.drawElements(gl.TRIANGLES, indexArray.length, gl.UNSIGNED_SHORT, 0)但是，里面有 3 个 cmets。
-
不知道This解释一下。gl.createVertexArray和gl.bindVertexArray的目的是什么。 - 不知道如何构造
vertexArray中的顶点。 - 不知道如何构造
indexArray中的索引。
我已经阅读了许多教程，但它们通常忽略了顶点/索引的创建和定义。他们并没有真正解释他们是如何设计或构造它们的，或者为什么会这样，所以我还没有真正能够自己重建它。我想将drawElements 与索引一起使用，而不是drawArrays。
想知道是否可以展示如何绘制 3 个具有不同颜色的矩形（通过 vertexArray 传递）。我想象在vertexArray 中交错位置/颜色，但我不知道如何正确地做到这一点，也不知道如何将数据与indexArray 相关联。通过“正确”，我的意思是我不直观地理解顶点的Float32Array 和索引的Uint32Array 的内容。如果是x, y，或者在这种情况下是x, y, r, g, b, a，或者什么。我不明白矩形是如何关闭的，它的“表面”是如何着色的。想知道是否有人可以帮助解释和演示这幅由 3 个不同颜色的矩形组成的图。这将有助于巩固如何在 WebGL 中绘图！
我尝试绘制它们是这样的：
const vertexArray = [
1, 1, 1, 1, 1, 1, // x y r g b a
0, 1, 1, 1, 1, 1,
1, 0, 1, 1, 1, 1,
0, 0, 1, 1, 1, 1
]
const indexArray = [
1,
2,
3,
4
]
但它什么也没做。
【问题讨论】：
标签： javascript webgl shader webgl2