如何有效地将THREE.Geometry转换为ArrayBuffer，File或Blob？ [英] How to efficiently convert THREE.Geometry to ArrayBuffer, File or Blob?

问题描述

我想移动一段我的代码，在其中我构建一个THREE.Geometry对象到 HTML5 Web Worker 。

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 。

工作原理：

1. 创建一个工人a nd使用 importScripts（/ js / lib / mrdoob-three.js-35db421 / build / three.js）导入three.js;

在工人中，您创建了另一个要处理的几何体实例。

In the worker you create another instance of the geometry you want to process.

触发一个初始渲染main thred 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屋！