All geek questions in one place

How to efficiently convert THREE.Geometry to ArrayBuffer, File or Blob?

I would like to move the part of my code in which I create a THREE.Geometry object for HTML5 Web Worker .

Since I don't want to serialize it to a string (for obvious performance), I would like to convert it to a Transferable Object as an ArrayBuffer, File or Blob, so I can pass it "by reference".

Do you know an efficient way to convert THREE.Geometry to one of these objects?

+2
source share
1 answer

The most efficient way is to use existing geometry buffers, such as:

geometryGroup.__vertexArray geometryGroup.__normalArray

They are created in WebGLRenderer.initMeshBuffers .

How it works:

  • Create a worker and import the three.js file using importScripts("/js/lib/mrdoob-three.js-35db421/build/three.js");

  • In the working case, you create another instance of the geometry that you want to process.

  • The trigger of the first initial rendering in the main thred renderer.render(scene, camera); buffers are now available ...

  • Send the necessary buffers from the main stream to the worker

  • Do hard work on workflow geometry.

  • In manual mode (there is no support for this in threejs) fill in the necessary buffers (see WebGLRenderer.setMeshBuffers) for example:

     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 stream 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 );

If you perform complex operations on geometries, this works well. It is important to understand how buffers are created and used by WebGLRenderer .

+4
source

Source: https://habr.com/ru/post/983029/

More articles:


All Articles