glsl - WebGL 中的体积渲染

Question

我有一个要使用 WebGL 呈现的科学数据的 3D 数组数据集。这是我编写的代码，也是我目前取得的结果。

我对输出画布发生的两件事一无所知：

1. gl.clearcolor(0.4, 0.4, 0.5, 1); 屏幕渲染输出时不起作用

   ---

2. 有时在 drawScene 调用代码会引发错误和警告。我相信警告是针对该错误的，但我无法调试导致该错误的原因：

警告：WebGL：INVALID_OPERATION：texImage3D：ArrayBufferView 对请求来说不够大

错误：texImage3D（TEXTURE_3D{WebGLTexture（“未命名”）}，0，R8，64，64，64，0，RED，UNSIGNED_BYTE，Uint8Array（65536））中的错误：INVALID_OPERATION

---

3）渲染输出的预期输出为：

---

和

---

但渲染的输出未显示所需的颜色图输出。

这是一个现场演示：

在线演示

如果此代码段在任何情况下均未加载，则这是输出：

PS：如果片段未加载，请滑动右上角的滑块。

Answer 1

首要问题

gl.texImage3D(gl.TEXTURE_3D, 0, gl.R8, 64, 64, 64, 0, RED, UNSIGNED_BYTE, Uint8Array(65536)): INVALID_OPERATION

R8 具有 64 * 64 * 64 = 262144 字节，但您传递的数组只有 65536 字节大。

第二期

当代码上传查找图时，它只需要红色

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, gl.RED, gl.UNSIGNED_BYTE, image);

你可能想要

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB8, gl.RGB, gl.UNSIGNED_BYTE, image);

第三期

至于清除颜色，WebGL 默认情况下，每次与页面合成时都会清除画布。因为你清除画布，然后异步加载数据，然后绘制数据流是

1. 将绘图缓冲区清除为某种颜色
2. 异步加载数据
3. 浏览器将画布的绘图缓冲区与您清除的颜色组合到页面
4. 浏览器将画布绘图缓冲区清除为 0,0,0,0
5. 数据加载完毕
6. 您在清除的绘图缓冲区上使用 WebGL 绘图
7. 浏览器将画布的绘图缓冲区合成到页面。

这就是你看到它闪烁的原因。如果您将呼叫移至gl.clear其中loadData，它将起作用。