如何在 webgl 中使用步幅
How do i use stride in webgl?
本文关键字:webgl 更新时间:2023-09-26
//Defining geometry
var vertices = [
+0.0,+0.0,+0.0,
+0.0,+0.0,+1.0,
-0.5,+0.0,+0.0,
+1.0,+0.0,+0.0,
-0.5,-0.5,+0.0,
+0.0,+1.0,+0.0,
+0.5,+0.5,+0.0,
+1.0,+0.0,+1.0,
+0.5,+0.0,+0.0,
+1.0,+1.0,+0.0,
-0.5,+0.5,+0.0
+1.0,+0.0,+1.0
];
indices = [3,4,0,0,2,1,5,0,1];
var VextexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
var coord = webgl.getAttribLocation(shaderProgram,"coordinates");
webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);
webgl.enableVertexAttribArray(coord);
var color = webgl.getAttribLocation(shaderProgram, "color");
webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);
webgl.enableVertexAttribArray(color);
var IndexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);
我想在 VertexAttribPointer 方法中使用 stride 对顶点和颜色数据使用单个 VBO,而不是使用 2 个 VCO,但问题是我不知道 javascript 中浮点数的大小。所以我假设它是 4。
现在我收到此错误:-
**[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:
attempt to access out of range vertices in attribute 1**
我认为问题出在:-
webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);
和:-
webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);
请告诉故障在哪里?谢谢。
在 WebGL 中,FLOAT 的大小是 4。它与数字或浮点 JavaScript 无关。JavaScript 中的浮点数/数字与 WebGL 缓冲区中的浮点数是分开的。
你的抽奖电话在哪里?从上面的代码中不清楚出了什么问题。一目了然看起来是正确的
在下面测试它,我发现了 1,问题。您在最后一个坐标和最后一个颜色之间缺少逗号,这意味着您的vertices
数组少了一个值
var webgl = document.querySelector("#c").getContext("webgl");
var shaderProgram = twgl.createProgramFromScripts(webgl, ["vs", "fs"]);
webgl.useProgram(shaderProgram);
//Defining geometry
var vertices = [
+0.0,+0.0,+0.0,
+0.0,+0.0,+1.0,
-0.5,+0.0,+0.0,
+1.0,+0.0,+0.0,
-0.5,-0.5,+0.0,
+0.0,+1.0,+0.0,
+0.5,+0.5,+0.0,
+1.0,+0.0,+1.0,
+0.5,+0.0,+0.0,
+1.0,+1.0,+0.0,
-0.5,+0.5,+0.0,
+1.0,+0.0,+1.0
];
indices = [3,4,0,0,2,1,5,0,1];
var VextexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
var coord = webgl.getAttribLocation(shaderProgram,"coordinates");
webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,6 * 4,0);
webgl.enableVertexAttribArray(coord);
var color = webgl.getAttribLocation(shaderProgram, "color");
webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,6 * 4,3 * 4);
webgl.enableVertexAttribArray(color);
var IndexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);
<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 coordinates;
attribute vec4 color;
varying vec4 v_color;
void main() {
gl_Position = coordinates;
v_color = color;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
</script>
<canvas id="c"></canvas>
相关文章:
- 如何检测用于WebGL的专用或集成显卡
- 在WebGL中绘制多个二维图像
- WebGL绘制图像
- webgl在一个正方形上操纵两个纹理
- Three.js,WebGL,渲染六幅图像的全景图
- 如何在使用IEWebGL时检测WebGL是否可用
- WebGL-依次应用多个程序
- 关于基于VivaGraph WebGL的渲染的问题
- WebGL多纹理多维数据集
- 如何避免webGL着色器加载给cpu带来太多负载
- WebGl-倾斜投影
- WebGL-操作useProgram无效
- Webgl 加载 json 模型问题
- WebGL VS Canvas 2D 硬件加速
- 如何在 webgl 中使用步幅
- Webgl readPixels() 无效操作:格式/类型组合无效
- 在WebGL中相同的旋转
- 检测 WebGL 支持的正确方法
- 如何使用 THREE.js/WebGL 将 2D 绘图转换为 3Drawing
- WebGL:通过 2D 着色器的圆线接头