WebGL中的体积渲染

编程问答 2022-08-15

问题描述

我有一个要使用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，红色，UNSIGNED_BYTE，Uint8Array（65536））：INVALID_OPERATION

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

enter image description here

和

enter image description here

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

这是现场演示：

online demo

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

enter image description here

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

解决方法

第一期

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

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

第二期

当代码上传查找图时，它只会显示红色

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

您可能想要

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

第三期

对于透明颜色，默认情况下，WebGL在每次将画布与页面合成时都会清除画布。因为您清除了画布，然后异步加载数据，然后绘制数据流，所以

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

这就是为什么您看到它闪烁的原因。如果将对gl.clear的呼叫移到loadData，它将起作用。