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("unnamed")}, 0, R8, 64, 64, 64, 0，红色，UNSIGNED_BYTE，Uint8Array(65536))：INVALID_OPERATION

---

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

---

和

---

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

这是一个现场演示：

online demo

如果这个 sn-p 在任何情况下都没有加载，这是输出：

PS：如果 sn-p 未加载，请滑动右上角的滑块。

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，它将起作用。