如何有效地将 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.

工作原理:

1. 创建一个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屋！