快速概览；假设您熟悉 ReGL。

对于基本模板，请查看basic.js. 它展示了如何处理制服和单个属性（位置）。当你有多个属性时，它们必须被填充到一个数组缓冲区中；看thick.lines.js。image.js显示如何处理图像采样器；它的texture论据来自DrawCommands.createTexture。

帧缓冲区允许您绘制纹理；DrawCommands.createFrameBuffer创建一个帧缓冲区和一个纹理来配合它。DrawCommands.useFrameBuffer将所有绘图重定向到属于帧缓冲区对象的纹理。

如果您创建任何对象，那么.destroy()当您不再需要它们时，您需要这些对象。创建一个对象并重用它通常比频繁创建和销毁对象要好。

好的，我会清空看看的：）

嗨，好吧，想做一些测试让相机在工作区中作为图像文档工作（我稍后会弄清楚是否需要），我找到了开始的地方@ workspace.js:236

问题：

• REGL 自动获取 DOM 视频元素并构造为纹理。在 LWGL 中会做同样的事情吗？
• cachedDocument 的目的是什么？
• 应该缓存视频图像吗？视频是流式图像，因此纹理每帧都会发生变化。

不要使用文档。而是将视频添加到 workspace.js 的 setCanvas() 中的 draw() lambda。

• 尝试texture.set({image: videoElement})。这应该从 videoElement 中获取当前帧。未经测试。
• 不要使用缓存文档。其目的，请参见 DocumentCacheHolder 上面的评论。
• 不

试试 texture.set({image: videoElement})。这应该从 videoElement 中获取当前帧。未经测试。

对不起，但在哪里？我应该先创建纹理吗？
创建纹理的地方在哪里？

创建纹理的好地方是在它创建 hitTestFrameBuffer 之后立即在 setCanvas 中。每帧调用一次绘制回调。在调用 this.grid.draw() 之前是填充纹理、处理它并绘制结果的好地方。

我刚刚想通了:)

在 REGL 中，我使用了多个帧缓冲区来转储结果，因为我不知道如何在单个帧缓冲区上执行此操作。

我怎样才能在 LWGL 上做到这一点？

多个帧缓冲区可能是最简单的。在创建 hitTestFrameBuffer 的地方创建帧缓冲区。

如何将结果帧缓冲区转储到画布？使用图像纹理 = 帧缓冲区纹理？

最简单的方法是使用 drawCommands.image() 并将其传递给帧缓冲区的纹理成员。

@tbfleming将此行https://github.com/LaserWeb/LaserWeb4/blob/dev-es6/src/draw-commands/webcam.js#L118从 REGL 翻译成 LWGL 的方法是什么？

我现在有

let data = drawCommands.createBuffer(new Float32Array([0, 1, 2],[0, 2, 3],[2, 1, 0],[3, 2, 0]));
    return ({lens, fov, texture }) => {
        drawCommands.execute({
            program,
            primitive: drawCommands.gl.TRIANGLES,
            uniforms: { uLens:lens, uFov: fov, uSampler: texture },
            buffer: {
                data,
                stride: 0,
                offset: 0,
                count: 4,
            },
        });
    };

https://github.com/jorgerobles/LaserWeb4/tree/workspace_video上的错误实现

LWGL 不支持元素，因此您必须手动扩展数据数组。原文中的 0-3 是https://github.com/LaserWeb/LaserWeb4/blob/dev-es6/src/draw-commands/webcam.js#L100和https://github.com/LaserWeb/LaserWeb4的索引/blob/dev-es6/src/draw-commands/webcam.js#L106

展开后，您应该得到 12 个顶点。每个顶点将包含 aVertexPosition.x、aVertexPosition.y、aVertexPosition.z、aTextureCoord.x、aTextureCoord.x。

对不起，我没听懂。?

elements:
[0, 1, 2],[0, 2, 3],[2, 1, 0],[3, 2, 0]

vertexCoords:
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0,
 1.0, 1.0, 0.0,
 -1.0, 1.0, 0.0

textureCoords:
 0.0, 0.0, 1.0, 0.0, 1.0, 1.0,  0.0, 1.0

所以它会是…

let data = drawCommands.createBuffer(new Float32Array([
[-1.0, -1.0, 0.0, 0.0, 0.0],//index 0
[1.0, -1.0, 0.0, 1.0, 0.0],//index 1
...]
));

一个怎么样

 stride: 0,
 offset: 0,
 count: 4,

我结束了

let data = drawCommands.createBuffer(new Float32Array([
        [-1.0, -1.0, 0.0, 0.0, 0.0 ], [1.0, -1.0, 0.0, 1.0, 0.0], [1.0, 1.0, 0.0,  1.0, 1.0],
        [-1.0, -1.0, 0.0, 0.0, 0.0 ], [1.0, 1.0, 0.0,  1.0, 1.0], [-1.0, 1.0, 0.0, 0.0, 1.0],
        [1.0, 1.0, 0.0,  1.0, 1.0], [1.0, -1.0, 0.0, 1.0, 0.0], [-1.0, -1.0, 0.0, 0.0, 0.0 ], 
        [-1.0, 1.0, 0.0, 0.0, 1.0], [1.0, 1.0, 0.0,  1.0, 1.0], [-1.0, -1.0, 0.0, 0.0, 0.0 ]
    ]));
    return ({lens, fov, texture }) => {
        drawCommands.execute({
            program,
            primitive: drawCommands.gl.TRIANGLES,
            uniforms: { uLens: lens.map(parseFloat), uFov: fov.map(parseFloat), uSampler: texture },
            buffer: {
                data,
                stride: 0,
                offset: 0,
                count: 4,
            },
        });
    };

data: 看起来不错，只是它必须是一维数组。
步幅：每个顶点中的字节数：20
偏移量：0。此字段允许您跳过数据开头的数据。
计数：顶点数：12

有用！！！！
为什么 stride=20，32 位 x 5 位置为 4 个字节？

还有一件事。图像出现垂直翻转。如果每个“过滤器”都翻转输出，我会更喜欢。
我怎样才能做到这一点？

谢谢！

步幅=20，32 位 x 5 位置为 4 个字节？

是的

垂直翻转：更改：

return glCoord  * vec2(1.0, -1.0)/ 2.0 + vec2(0.5, 0.5);

到

return glCoord  * vec2(1.0, 1.0)/ 2.0 + vec2(0.5, 0.5);

好吧，我们取得了一些进展，但我无法获得经过 barrelDistort 处理的视频的完整图像。它超标并且更改大小值不起作用。

我试图通过https://github.com/LaserWeb/LaserWeb4/blob/dev-es6/src/draw-commands/webcam.js#L2模仿我在 regl 管道中的方式，但我没有得到任何可行的结果.

似乎与工作区大小有关。如果窗格被移动，图像改变偏移 O_o

如果我理解正确，我们可以关闭这个问题（我们可以绘制，它的效果堆栈仍然是待办事项？）（也就是从#30中的上次更新继续？