如何解决WebGL中的体积渲染
我有一个要使用WebGL渲染的科学数据的3D数组数据集。这是我编写的代码,这是我到目前为止已经实现的结果。
对于输出画布发生的两件事,我一无所知:
-
gl.clearcolor(0.4,0.4,0.5,1); 屏幕渲染输出时不起作用
-
有时在drawScene调用上,代码将引发错误和警告。我认为警告提示该错误,但我无法调试导致该错误的原因:
警告 : WebGL:INVALID_OPERATION:texImage3D:ArrayBufferView不足以容纳请求
错误 :texImage3D(TEXTURE_3D {WebGLTexture(“ 未命名”))}中的错误,0,R8、64、64、64, 0,红色,UNSIGNED_BYTE,Uint8Array(65536)):INVALID_OPERATION
3)渲染输出的预期输出为:
和
但渲染的输出未显示所需的颜色图输出。
这是现场演示:
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在每次将画布与页面合成时都会清除画布。因为您清除了画布,然后异步加载数据,然后绘制数据流,所以
- 将绘图缓冲区清除为某种颜色
- 异步加载数据
- 浏览器将您清除的颜色将画布的图形缓冲区合成到页面上
- 浏览器将画布绘图缓冲区清除为0,0
- 数据完成加载
- 您使用WebGL在已清除的绘图缓冲区上绘图
- 浏览器将画布的绘图缓冲区合成到页面上。
这就是为什么您看到它闪烁的原因。如果将对gl.clear
的呼叫移到loadData
,它将起作用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。