WebGL 中的体积渲染

Volumetric Rendering in WebGL

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

我对输出中发生的两件事一无所知canvas:

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

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

警告： WebGL：INVALID_OPERATION：texImage3D：ArrayBufferView 不够大，无法满足请求

error : texImage3D 错误(TEXTURE_3D{WebGLTexture("unnamed")}, 0, R8, 64, 64, 64, 0, 红色, UNSIGNED_BYTE, Uint8Array(65536)): INVALID_OPERATION

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

和

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

这是现场演示：

online demo

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

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

第一期

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 会在每次与页面合成时清除 canvas。因为你清除canvas，然后异步加载数据，然后绘制数据流是

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

这就是您看到它闪烁的原因。如果您将对 gl.clear 的调用移至 loadData，它将起作用。