最近30次来自stackoverflow.com 2024-06-29T04:30:06Z https://stackoverflow.com/feeds/tag/twgl.js+着色器 https://creativecommons.org/licenses/by-sa/4.0/rdf https://stackoverflow.com/q/60669676 0 杰基里 https://stackoverflow.com/users/12791349 2020-03-13T11:29:36Z 2020-03-14T10:53:49Z

<p>我的顶点着色器具有以下属性：</p><pre class=“lang-c prettyprint-override”><code>属性float a_color；</code></pre><p>我有一个数组缓冲区（WebAssembly的内存），它只包含0和1，我通过创建一个<code>Uint8Array来创建它的视图。然而，我的顶点着色器忽略了它（没有错误，但似乎将所有内容都视为0）。我正在使用<code>twgl</code>。这是我的代码：</p><p>顶点着色器：</p><pre class=“lang-c prettyprint-override”><code>属性vec2 a_position；属性float a_color；均匀vec2 u_resolution；均匀浮点u_point_width；可变vec4 v颜色；vec2 normalize_coords（vec2位置）{浮子x=位置[0]；浮子y=位置[1]；float resx=u_resolution[0]；浮点resy=u_resolution[1]；返回vec2（2.0*x/resx-1.0，2.0*y/resy-1.0）；}空main（）{gl_PointSize=u_point_width；vec2坐标=normalize_coords（a_position）；gl_Position=vec4（坐标*vec2（1，-1），0，1）；v颜色=vec4（0，a颜色，0,1）；}</code></pre><p>碎片着色器：</p><pre class=“lang-c prettyprint-override”><code>高精度浮点；可变vec4 v颜色；空main（）{gl_FragColor=v_color；}</code></pre><p>Java脚本：</p><pre class=“lang-js prettyprint-override”>const canvas=document.getElementById（“c”）；常量单元格大小=10；const gl=canvas.getContext（“webgl”）；const programInfo=twgl.createProgramInfo（gl[“顶点着色器”，“碎片阴影”]);twgl.setDefaults（{attribPrefix:“a_”}）；twgl.resizeCanvasToDisplaySize（gl.canvas，window.devicePixelRatio）；gl.视口（0，0，gl.canvas.width，gl.cavas.height）；const universe=通用新(数学细胞（gl.canvas.width/CELL_SIZE/2），数学.ceil（gl.canvas.height/CEL_SIZE/2）);const width=universe.width（）；const height=universe.height（）；设点=[]；for（设i=0；i&lt；width；i++）{for（设j=0；j&lt；高度；j++）{点push（[i*CELL_SIZE*2，j*CELLS_SIZE*2]）；}}const cellsPtr=universe.cells（）；//Webassembly内存（仅0和1）const cells=新Uint8Array（memory.buffer，cellsPtr，width*height）；常量数组={位置：{数据：新的Float32Array（points.flat（）），大小：2},颜色：{数据：单元格，尺寸：1，类型：gl.UNSIGNED_BYTE}};const bufferInfo=twgl.createBufferInfoFromArrays（gl，数组）；const制服={u_resolution:[gl.canvas.width，gl.cavas.height]，u_point_width:单元格大小};gl.清除颜色（0,0,0,1）；全局清除（全局COLOR_BUFFER_BIT）；gl.useProgram（programInfo.program）；twgl.setUniforms（programInfo，制服）；twgl.setBuffersAndAttributes（gl，programInfo，bufferInfo）；twgl.drawBufferInfo（gl，缓冲信息，gl.POINTS）；函数renderLoop（时间）{twgl.resizeCanvasToDisplaySize（gl.canvas，window.devicePixelRatio）；gl.视口（0，0，gl.canvas.width，gl.cavas.height）；universe.tick（）；const cellsPtr=universe.cells（）；const cells=新Uint8Array(内存缓冲区，单元格Ptr，宽度*高度);const制服={u_resolution:[gl.canvas.width，gl.cavas.height]，u_point_width:单元格大小};gl.清除颜色（0,0,0,1）；全局清除（全局COLOR_BUFFER_BIT）；gl.useProgram（programInfo.program）；twgl.setUniforms（programInfo，制服）；twgl.setAttrbInfoBufferFromArray（gl，bufferInfo.attribs.a_color{数据：单元格，尺寸：1，类型：gl.UNSIGNED_BYTE}); // 使用新颜色动态更新缓冲区twgl.setBuffersAndAttributes（gl，programInfo，bufferInfo）；twgl.drawBufferInfo（gl，缓冲信息，gl.POINTS）；请求动画帧（renderLoop）；}请求动画帧（renderLoop）；};</code></pre><p>如果我手动将<code>单元格</code>转换为<code>Float32Array</code>，则没有问题。我做错什么了吗</p＞<p>下面是上述代码的实时简化版本（屏幕上应该有绿色点，但没有）：</p><p><a href=“https://codesandbox.io/s/silly-jackson-ut3wm“rel=”nofollow noreferrer“>https://codesandbox.io/s/silly-jackson-ut3wm</a></p>