如何有效地将 THREE.Geometry 转换为 ArrayBuffer、File 或 Blob? [英] How to efficiently convert THREE.Geometry to ArrayBuffer, File or Blob?
问题描述
我想将我构建 THREE.Geometry 对象的一段代码移动到 HTML5 网络工作者.
I'd like to move a piece of my code in which i build a THREE.Geometry object to a HTML5 Web Worker.
由于我不想将其序列化为字符串(出于明显的性能目的),我想将其转换为 可传输对象,如 ArrayBuffer、File 或 Blob,因此我可以通过引用"传递它.
Since i don't want to serialize it to a string (for obvious performance purposes), i'd like to convert it to a Transferable Object like ArrayBuffer, File or Blob so i can pass it "by reference".
您知道将 THREE.Geometry 转换为其中一个对象的有效方法吗?
Do you know a efficient way to convert a THREE.Geometry to one of those objects ?
推荐答案
最有效的方法是使用现有的几何缓冲区,例如:
The most efficient way is to use the existing geometry buffers such as:
geometryGroup.__vertexArray
geometryGroup.__normalArray
它们是在 WebGLRenderer.initMeshBuffers
中创建的.
They are created in WebGLRenderer.initMeshBuffers
.
工作原理:
创建一个Worker并使用
importScripts("/js/lib/mrdoob-three.js-35db421/build/three.js");
在 worker 中创建另一个要处理的几何体实例.
In the worker you create another instance of the geometry you want to process.
在主线程中触发一次初始渲染 renderer.render(scene, camera);
现在缓冲区可用...
Trigger one initial rendering in the main thred renderer.render(scene, camera);
now the buffers are available...
将所需的缓冲区从主线程发送到工作线程
Send the required buffers from the main thread to the worker
在工作线程中努力处理几何体
Do the hard work on the geometry at the worker thread
手动(在threejs中不支持)填充所需的缓冲区(参见WebGLRenderer.setMeshBuffers)
例如:
Manually (there is no support for that in threejs) fill the required buffers (see WebGLRenderer.setMeshBuffers)
e.g.:
var vertexArray = new Float32Array(vertexBuffer);
var normalArray = new Float32Array(normalBuffer);
var vertices : Array = geometry.vertices;
var obj_faces : Array = geometry.faces;
var offset = 0;
var offset_normal = 0;
for (f in 0...obj_faces.length) {
var face = obj_faces[ f ];
var v1 = vertices[ face.a ];
var v2 = vertices[ face.b ];
var v3 = vertices[ face.c ];
var v4 = vertices[ face.d ];
vertexArray[ offset ] = v1.x;
vertexArray[ offset + 1 ] = v1.y;
vertexArray[ offset + 2 ] = v1.z;
vertexArray[ offset + 3 ] = v2.x;
vertexArray[ offset + 4 ] = v2.y;
vertexArray[ offset + 5 ] = v2.z;
vertexArray[ offset + 6 ] = v3.x;
vertexArray[ offset + 7 ] = v3.y;
vertexArray[ offset + 8 ] = v3.z;
vertexArray[ offset + 9 ] = v4.x;
vertexArray[ offset + 10 ] = v4.y;
vertexArray[ offset + 11 ] = v4.z;
offset += 12;
}
将缓冲区发送回主线程并在那里更新几何:
send the buffers back to the main thread and update the geometry there:
var geometryGroup = mesh.geometry.geometryGroupsList[0];
var _gl = renderer.context;
_gl.bindBuffer(_gl.ARRAY_BUFFER, geometryGroup.__webglVertexBuffer );
_gl.bufferData(_gl.ARRAY_BUFFER, transferVertexArray, _gl.DYNAMIC_DRAW );
如果您正在对几何图形进行复杂的操作,这很有效.了解 WebGLRenderer
如何创建和使用缓冲区很重要.
If you are doing complex operations on geometries this works well. Understanding how the buffers are created and used by WebGLRenderer
is important.
这篇关于如何有效地将 THREE.Geometry 转换为 ArrayBuffer、File 或 Blob?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!