vertex-buffer 相关问题

我正在尝试设置每个三角形的颜色。但它不起作用。仅设置每个顶点的颜色才有效！这是我做的：每个三角形的颜色我正在尝试设置每个三角形的颜色。但是它不起作用。仅设置每个顶点的颜色才有效！这就是我做的： <!DOCTYPE html><title>Color Per Triangle</title><style> body{ background-color: #000 } canvas{ display: block; width: 600px; height: 400px; outline: 1px solid #343438 } </style><canvas width=900 height=600></canvas><script type=module> const canvas=document.body.firstChild, C=canvas.getContext(`webgpu`), red=[.9,.3,.3,1], yel=[.7,.7,.3,1], tri=[ 0,0,0,...red, 0, 1,0,...red, 1,0,0,...red, // ⚠️ Wish: avoid color repeating 0,0,0,...yel, 0,-1,0,...yel, -1,0,0,...yel, ]; /* ♻️ WANT THIS: tri=[ 0,0,0, 0, 1,0, 1,0,0, ...red, // set color per triangle 0,0,0, 0,-1,0, -1,0,0, ...yel, ] */ VB_$=window.VB_$=new Float32Array(tri); // Vertex Buffer Source let code=` struct _V { @location(0) p: vec3f, @location(1) c: vec4f, }; struct V_ { @builtin(position) p: vec4f, @location(0) c: vec4f, }; @vertex fn vs(_v: _V) -> V_ { var v_: V_; v_.p = vec4f(_v.p, 1); v_.c = _v.c; return v_; } @fragment fn fs(v_: V_) -> @location(0) vec4f { return v_.c; } `, format = `bgra8unorm`, adapter = await navigator.gpu.requestAdapter(), device = await adapter.requestDevice(), Q = device.queue, A = { loadOp: `clear`, storeOp: `store` }, // Attachments O = { colorAttachments: [ A ] }, // Render Pass Descriptor module = device.createShaderModule({ code }), PO = { layout: `auto`, vertex: { module, entryPoint: `vs`, buffers:[ { arrayStride: 28, // (3+4)*4.; (xyz+rgba)*4. attributes: [ { shaderLocation:0, offset:0, format:`float32x3` }, // p: vec3f [xyz] { shaderLocation:1, offset:12, format:`float32x4` }, // c: vec4f [rgba]; 3*4. ] } ] }, fragment: { module, entryPoint: `fs`, targets: [{ format }] } }, P = device.createRenderPipeline( PO ), E,R, VB = device.createBuffer({ size: VB_$.byteLength, usage: 40 }); // VERTEX | COPY_DST function draw(){ A.view=C.getCurrentTexture().createView(); E=device.createCommandEncoder(); R=E.beginRenderPass(O); R.setPipeline(P); R.setVertexBuffer(0,VB); R.draw(6); // 2*3 = 2 triangles with 3 vertices each R.end(); Q.submit([ E.finish() ]) } C.configure({ device, format }) Q.writeBuffer(VB,0,VB_$); draw() </script> 此外，它不需要使用硬编码颜色。颜色和顶点位置必须使用顶点缓冲区传递给着色器！ PS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 我无法使用统一或存储缓冲区，因为浏览器显示：“不支持的位标志集（描述符范围标志 10002）。 D3D12 序列化根签名失败，出现 E_INVALIDARG (0x80070057) 在 CheckHRESULTImpl (....hird_party\dawn\src\dawn 原生\d3d\D3DError.cpp:96) 在初始化 (...hird_party\dawn\src\dawn ative\d3d12\PipelineLayoutD3D12.cpp:350)" 你不能，所有数据都是每个顶点的。即使您使用像 SSBO 这样的东西，您仍然需要在每个顶点中提供查找索引（然后当然要付出额外间接的成本）。您无法访问每个三角形和每个顶点的顶点缓冲区数据。您可以使用存储缓冲区。如果您遇到错误，您一定是设置错误了您可以在此处看到使用顶点数据的存储缓冲区在此处复制该示例并修改为每个三角形的颜色 // WebGPU Storage Buffer vertices // from https://webgpufundamentals.org/webgpu/webgpu-storage-buffer-vertices.html // A random number between [min and max) // With 1 argument it will be [0 to min) // With no arguments it will be [0 to 1) const rand = (min, max) => { if (min === undefined) { min = 0; max = 1; } else if (max === undefined) { max = min; min = 0; } return min + Math.random() * (max - min); }; function createCircleVertices({ radius = 1, numSubdivisions = 24, innerRadius = 0, startAngle = 0, endAngle = Math.PI * 2, } = {}) { // 2 triangles per subdivision, 3 verts per tri, 2 values (xy) each. const numVertices = numSubdivisions * 3 * 2; const vertexData = new Float32Array(numSubdivisions * 2 * 3 * 2); const colorData = new Uint32Array(numSubdivisions * 2) let offset = 0; const addVertex = (x, y) => { vertexData[offset++] = x; vertexData[offset++] = y; }; let colorOffset = 0; const addColor = (r, g, b, a) => { colorData[colorOffset++] = ((a | 0) << 24) | ((b | 0) << 16) | ((g | 0) << 8) | ((r | 0) << 0) ; }; const randColor = () => { return [ rand(256), rand(256), rand(256), 255, ]; }; // 2 vertices per subdivision // // 0--1 4 // | / /| // |/ / | // 2 3--5 for (let i = 0; i < numSubdivisions; ++i) { const angle1 = startAngle + (i + 0) * (endAngle - startAngle) / numSubdivisions; const angle2 = startAngle + (i + 1) * (endAngle - startAngle) / numSubdivisions; const c1 = Math.cos(angle1); const s1 = Math.sin(angle1); const c2 = Math.cos(angle2); const s2 = Math.sin(angle2); // first triangle addVertex(c1 * radius, s1 * radius); addVertex(c2 * radius, s2 * radius); addVertex(c1 * innerRadius, s1 * innerRadius); addColor(...randColor()); // second triangle addVertex(c1 * innerRadius, s1 * innerRadius); addVertex(c2 * radius, s2 * radius); addVertex(c2 * innerRadius, s2 * innerRadius); addColor(...randColor()); } return { vertexData, colorData, numVertices, }; } async function main() { const adapter = await navigator.gpu?.requestAdapter(); const device = await adapter?.requestDevice(); if (!device) { fail('need a browser that supports WebGPU'); return; } // Get a WebGPU context from the canvas and configure it const canvas = document.querySelector('canvas'); const context = canvas.getContext('webgpu'); const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); context.configure({ device, format: presentationFormat, }); const module = device.createShaderModule({ code: ` struct PerVertexData { position: vec2f, }; struct VSOutput { @builtin(position) position: vec4f, @location(0) color: vec4f, }; struct Uniforms { mat: mat4x4f, }; @group(0) @binding(0) var<storage, read> perVertData: array<PerVertexData>; @group(0) @binding(1) var<storage, read> perTriData: array<u32>; @vertex fn vs( @builtin(vertex_index) vertexIndex : u32, ) -> VSOutput { let triangleIndex = vertexIndex / 3; let vert = perVertData[vertexIndex]; let tri = perTriData[triangleIndex]; var vsOut: VSOutput; vsOut.position = vec4f(vert.position, 0.0, 1.0); vsOut.color = unpack4x8unorm(tri); return vsOut; } @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f { return vsOut.color; } `, }); const pipeline = device.createRenderPipeline({ label: 'storage buffer vertices', layout: 'auto', vertex: { module, entryPoint: 'vs', }, fragment: { module, entryPoint: 'fs', targets: [{ format: presentationFormat }], }, }); const kNumObjects = 100; const objectInfos = []; // setup a storage buffer with vertex data const { vertexData, colorData, numVertices } = createCircleVertices({ radius: 0.5, innerRadius: 0.25, }); const vertexStorageBuffer = device.createBuffer({ label: 'storage buffer per vert data', size: vertexData.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(vertexStorageBuffer, 0, vertexData); const colorStorageBuffer = device.createBuffer({ label: 'storage buffer per color data', size: colorData.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }); device.queue.writeBuffer(colorStorageBuffer, 0, colorData); const bindGroup = device.createBindGroup({ label: 'bind group for objects', layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: { buffer: vertexStorageBuffer }}, { binding: 1, resource: { buffer: colorStorageBuffer }}, ], }); const renderPassDescriptor = { label: 'our basic canvas renderPass', colorAttachments: [ { // view: <- to be filled out when we render clearValue: [0.3, 0.3, 0.3, 1], loadOp: 'clear', storeOp: 'store', }, ], }; function render() { // Get the current texture from the canvas context and // set it as the texture to render to. renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView(); const encoder = device.createCommandEncoder(); const pass = encoder.beginRenderPass(renderPassDescriptor); pass.setPipeline(pipeline); pass.setBindGroup(0, bindGroup); pass.draw(numVertices); pass.end(); const commandBuffer = encoder.finish(); device.queue.submit([commandBuffer]); } const observer = new ResizeObserver(entries => { for (const entry of entries) { const canvas = entry.target; const width = entry.contentBoxSize[0].inlineSize; const height = entry.contentBoxSize[0].blockSize; canvas.width = Math.max(1, Math.min(width, device.limits.maxTextureDimension2D)); canvas.height = Math.max(1, Math.min(height, device.limits.maxTextureDimension2D)); // re-render render(); } }); observer.observe(canvas); } function fail(msg) { alert(msg); } main(); @import url(https://webgpufundamentals.org/webgpu/resources/webgpu-lesson.css); html, body { margin: 0; /* remove the default margin */ height: 100%; /* make the html,body fill the page */ } canvas { display: block; /* make the canvas act like a block */ width: 100%; /* make the canvas fill its container */ height: 100%; } <canvas></canvas> 请注意，上述解决方案假设目标是每个三角形有 1 条颜色数据。如果目标是每个三角形有 1 种颜色，忽略额外的数据，那么您可以重复数据。您还可以在阶段间颜色变量中使用 @interpolate(flat)，使其不插入颜色。此外，您还可以使用实例化，其中某些顶点数据每个实例仅更改一次。这可能不适合您的用例，但以防万一，这里是如何使用顶点缓冲区进行实例，这里是如何使用存储缓冲区进行实例

javascript vertex-buffer webgpu

回答 2 投票 0

在Vulkan中更新顶点缓冲区的最一般的正确方法。

假设设备内存中有一个顶点缓冲区和一个主机相干可见的暂存缓冲区。同时假设桌面系统有一个独立的GPU（所以是独立的内存）。最后，假设正确的互...

language-agnostic vulkan vertex-buffer

回答 1 投票 0

最低保证的Shader存储块大小是多少？

如果有的话，我好像找不到。我遇到了一个统一缓冲区的问题，gl规范给出的最小尺寸只有1024个位置。是否有一个设定的最小位置数，我 ...

c++ opengl shader vertex-buffer ssbo

回答 1 投票 1

为什么我们需要带vbuffer-> Lock（）的void *？（Direct3D9）

因此，我目前正在directxtutorial.com上学习Direct3D9，并通过vbuffer-> Lock（）函数遇到了void * pVoid。我知道什么是void *，我只是不明白为什么在...