跳转至内容

0

在线

680

用户

202

主题

525

帖子

中文社区

有关WebGPU引擎的技术分析与探讨,包括引擎设计,编辑器,GFX,Shader语言编译器,3D文件转换器等。

156 主题 399 帖子
  • 0 赞同
    3 帖子
    826 浏览
    P

    @shuangliu 感谢回复👍

  • 顶点格式下的offset: 怎么理解?

    6
    0 赞同
    6 帖子
    1k 浏览
    支阿怪

    @shuangliu 明白了,感谢您的回复👍

  • WGSL中生成随机数

    4
    0 赞同
    4 帖子
    1k 浏览
    webgpuW

    @optics
    可以参考这篇文章
    https://thebookofshaders.com/10/?lan=ch

  • 关于setVertexBuffer()插槽的理解

    2
    0 赞同
    2 帖子
    580 浏览
    支阿怪

    我好像明白了,0,1是建立着色器和GPU缓冲区的一种方式代号,把缓冲区里面的顶点数据和颜色数据引用到着色器里面,联系的方式是buffers里的shaderLocation:0 和着色器里的[[location(0)]],因为我在main文件中创建顶点和颜色数据;
    因此在最后的渲染管道中,我需要读取顶点数据和颜色数据的GPUBuffers时,同样也需要进行插槽(通俗讲:一个属性代指一个有序数字)的指向,确保缓冲区内的数据于着色器保持同步进行渲染。

    把顶点坐标和颜色数据放在缓冲区写,是因为main.ts是typescript写成的,有代码提示,相比文本的着色器,调试起来更方便。

    0b4036c9-5928-4dc3-aaf6-efba13ed146d-image.png

    a490cedb-9040-40aa-a2a4-6b9cdc0bfb74-image.png

    af509abe-9493-4a6b-ad7a-6d8d7cf3df50-image.png

  • Orillusion引擎正在考虑是否兼容HLSL和GLSL

    3
    0 赞同
    3 帖子
    1k 浏览
    shuangliuS

    兼容的方案性价比有点低,本身webgpu不支持对应的标准和api,非要做则需要引擎额外预编译或js加载时实时转换,相关工作量很大,且很多api很难兼容,需要增加大量冗余的代码,甚至要引入wasm来运行一些底层编译库,导致最后引擎编译的版本体积也会大大增加,并不是一个好方案

  • WGSL | 模块变量和常量的源码案例

    3
    0 赞同
    3 帖子
    601 浏览
    shuangliuS

    w3c的doc国内可能不容易打开,可以参看Orillusion的官方翻译
    https://www.orillusion.com/zh/wgsl.html#var-and-let

  • WebGPU 更新 texture

    2
    0 赞同
    2 帖子
    991 浏览
    shuangliuS

    1.首先并不需要每个texture对应一个pipeline,可以在同一pipeline中使用不同的BindGroup,每个group对应不同的texture binding. e.g.

    let sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear', }); let texture1 = device.createTexture({ ... }); let texture2 = device.createTexture({ ... }); const group1 = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: texture1.createView(), } ] }); const group2 = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: texture2.createView(), } ] });

    然后在 rendering loop 中通过 setBindGroup 切换 group1 和 group 2 即可。

    2.如果一组 textures 是同样的大小和格式,可以直接使用 texture_2d_array 去存储多个 image,这样即使一个group内,也可以在shader中通过切换array的index,来直接切换 texutre.

    对于动态的 video texuture, 我们可以直接使用 importExternalTexture 进行引入,随着video播放,texture 会自动更新

    const video = document.createElement('video'); video.loop = true; video.autoplay = true; video.muted = true; video.src = '...'; await video.play(); const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: device.importExternalTexture({ source: video, }) } ] });

    3.对于更新静态的 texutre,可以根据目标 image/texture 的类型进行 copy 更新,目前 webgpu 提供多个copy command,我们一般最主要会用到的:copyExternalImageToTexture ,可以更新外部image到gpu texture:

    let texture = device.createTexture({ ... }); const img1 = document.createElement('img'); img1.src = '....'; await img1.decode(); const image1 = await createImageBitmap(img1); device.queue.copyExternalImageToTexture( { source: image1 }, { texture: texture }, [image1.width, image1.height] ); ... ...js // 更新texture的image const img2 = document.createElement('img'); img2.src = '....'; await img2.decode(); const image2 = await createImageBitmap(img2); device.queue.copyExternalImageToTexture( { source: image2 }, { texture: texture }, [image2.width, image2.height] );

    另外,也可以用 commandEncoder 执行 copyTextureToTexture 进行两个 gpu texutre 之间的copy 更新

    // e.g. 创建两个texture,texture1 用于显示,tempTexture用于接收外部图片,图片loading 后进行 copy 更新 let texture1 = device.createTexture({ ... }); ... let tempTexture = device.createTexture({ ... }); let newImage = await loadImage() // 异步加载图片 device.queue.copyExternalImageToTexture( { source: newImage }, { texture: tempTexture }, [newImage.width, newImage.height] ); const commandEncoder = device.createCommandEncoder(); commandEncoder.copyTextureToTexture( { texture: tempTexture }, { texture: texture1 } ); device.queue.submit([commandEncoder.finish()]);

    其他的更新texture API 使用方法,可以参阅 https://www.orillusion.com/webgpu.html#image-copies

    4.对于 sampler,目前 webgpu 没有直接更新 sampler 的API,只能创建新的 sampler,并使用新的group进行渲染,e.g.

    let linearSampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear', }); const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: linearSampler, }, { binding: 2, resource: texture } ] }); let nearestSampler = device.createSampler({ magFilter: 'nearest', minFilter: 'nearest', }); const newGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: nearestSampler, }, { binding: 2, resource: texture } ] });

    group中其他的resource并不需要重新创建,可以复用

  • WebGL 与 WebGPU 比对[1] 前奏

    1
    0 赞同
    1 帖子
    490 浏览
    尚无回复
  • 此主题已被删除!

    1
    0 赞同
    1 帖子
    97 浏览
    尚无回复
  • Web端渲染引擎框架概述

    1
    0 赞同
    1 帖子
    866 浏览
    尚无回复
  • WebGPU: compute shader的使用场景有哪些

    2
    0 赞同
    2 帖子
    511 浏览
    shuangliuS

    Compute Shader是允许我们,把本来在CPU端要做很大计算的一些事情放到GPU来做,而并不是在某些特定的场景才会使用。

    利用GPU计算一直都有,在WebGL的中,我们也经常用vertex/ fragment shader 进行复杂计算,主要用于粒子特效的模拟或仿真,但确实使用不方便。一些纯计算 / AI引擎,比如TensorFlow,也会利用WebGL 模拟进行 GPU 并行计算

    WebGPU 开放 Compute shader 后,可以更方便的进行 GPU 计算开发,粒子系统,AI训练,或者物理系统模拟,可以更高效的开发。

    当然,有了compute管线后,一些经典的渲染场景,例如延迟渲染,光线追踪,主动剔除等复杂的渲染计算成为可能,要比WebGL的开发灵活性和能力强很多。

    除此之外,最简单的使用场景,例如把 mvp transform的矩阵计算放在compute shader中进行,要比写在vertex shader中更灵活,gpu性能利用率更高。

  • 各着色器语言有什么区别?

    2
    0 赞同
    2 帖子
    1k 浏览
    adminA

    并没有绝对的优势,劣势,最后都会编译成assembly。Cg 和 HLSL 几乎相同(相同的内置函数名称)。 GLSL 的语法有点不同(比如用 mix 代替 lerp,使用类似 main 的函数),但整体过渡仍然很容易。 唯一的区别在于细节和各自的 API(比如矩阵存储顺序之类的)。

  • WebGPU中Indirect Draw的实现

    2
    0 赞同
    2 帖子
    2k 浏览
    shuangliuS

    WebGPU有indirectDraw API
    spec: https://www.orillusion.com/zh/webgpu.html#dom-gpurenderencoderbase-drawindirect

    但是目前的WebGPU indirectDraw 只能encode draw command,因为WebGPU buffer中的每一个trunk都只是包含了draw command,而在Vulkan 和 Dx12,在draw command 之后还可以添加bind group等等,这样不仅仅是对draw command进行indirect操作,还可以操控bind group等等。

    就目前的WebGPU标准实现而言,indirectdraw 的意义不是很大,对性能提升不明显,仅仅只是加速draw的缓存而已,不如用 RenderBundle 提前对所有 command list 进行 record 从而提高性能。

    另外目前webgpu还不支持多线程操作,标准计划会支持,但目前的版本还没有实现,所以multi draw/writebuffer/submit encoder/... 都还不支持

  • Request device报错

    2
    0 赞同
    2 帖子
    458 浏览
    adminA

    @曙光磁铁 WebGPU标准仍处于draft阶段,浏览器默认不支持,需要 chrome 94+ 的浏览器配合origin-trail token才可以运行。如果需要自己本地开发测试,可以使用chrome canary,在地址栏访问chrome://flags ,将Unsafe WebGPU 设置为 enable 进行开启!

    screenshot-20211226-104823.png

  • 如何在webgpu中做纹理纵向反转

    2
    0 赞同
    2 帖子
    1k 浏览
    adminA

    @浮光_ 考虑你为什么需要做flip,可能是OpenGL或者WebGL的坐标系与WebGPU的不同,WebGL的原点是左下角,而DX12和Vulkan,也就是WebGPU的坐标原点都是左上角,如果你把webgl的代码放到webgpu的话,就需要转换坐标,可以在shader把UV的值改一下,比如uv.y = 1 - uv.y

    另外,gl.pixelStore只是改变了你上传texture的顺序,但是整个屏幕空间的坐标是不对应的,后面如果还需要处理比如render target,那么问题还会存在

  • WGSL做矩阵转换,矩阵运算

    2
    0 赞同
    2 帖子
    1k 浏览
    adminA

    @zmr wgsl里可以直接进行matrix矩阵相乘运算
    https://www.orillusion.com/zh/wgsl.html#arithmetic-expr

    多说一点,任何代码其实只是一行行的string character,最后都会通过编译器编译成对应的assembly,然后再去执行。矩阵乘法运算就是对应到wgsl里面build-in的function

    另外,js不支持符号重载,就是不可以对已有的运算符重新进行定义。所以做运算最好通过function来实现