Javascript Girl
  1. Javascript Girl
  3. Comment convertir efficacement THREE.Geometry en ArrayBuffer, File ou Blob?
Intereting Posts
Existe-t-il un moyen d'empêcher un élément ContentEditable de faire défiler lorsque le curseur atteint le bas? Google chrome extension :: console.log () de la page d'arrière-plan? Php file_get_contents – APRÈS javascript s'exécute Comment obtenir Lat Long d'objet mobile sur google maps? Trier les chaînes de nombre par points en version par Javascript? Multi-triage d'un tableau multidimensionnel Supprimer la dernière ligne dans le tableau API Javascript pour Netflix Instant Player (Silverlight)? JQuery jPlayer change le support ne fonctionne pas Comment puis-je obtenir une valeur d'entrée dans la portée de Angular? Comment convertir les coordonnées x, y en un angle? Cefsharp exécute javascript Parlez les dates YYYY-MM-DD en utilisant la fuseau horaire local Comment puis-je enregistrer le courrier électronique de l'utilisateur en tant que variable lorsque quelqu'un installe l'extension? Remplacer tous les enfants d'un HTMLElement?

Comment convertir efficacement THREE.Geometry en ArrayBuffer, File ou Blob?

J'aimerais déplacer un élément de mon code dans lequel je construis un objet TROIS.Géométrie à un travailleur Web HTML5 .

Puisque je ne veux pas le sérialiser sur une chaîne (pour des performances évidentes), j'aimerais le convertir en objet transférable comme ArrayBuffer, File ou Blob afin que je puisse le transmettre "par référence".

Connaissez-vous un moyen efficace de convertir une THREE.Geometry en un de ces objets?

Le moyen le plus efficace est d'utiliser les tampons géométriques existants tels que: 

geometryGroup.__vertexArray geometryGroup.__normalArray

Ils sont créés dans WebGLRenderer.initMeshBuffers .

Comment ça marche:

  1. Créez un travailleur et importez trois.js en utilisant importScripts("/js/lib/mrdoob-three.js-35db421/build/three.js");

  2. Dans le travailleur, vous créez une autre instance de la géométrie que vous souhaitez traiter.

  3. Déclenchez un rendu initial dans le principal renderer.render renderer.render(scene, camera); Maintenant, les tampons sont disponibles …

  4. Envoyer les tampons requis du fil principal au travailleur

  5. Faites le travail acharné sur la géométrie au fil du travailleur

  6. Manuellement (il n'y a pas de support dans troisjs), remplissez les tampons requis (voir WebGLRenderer.setMeshBuffers) par exemple: 

     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; }

  7. Renvoyez les tampons vers le fil principal et mettez à jour la géométrie: 

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

Si vous faites des opérations complexes sur les géométries, cela fonctionne bien. WebGLRenderer est important de comprendre comment les buffers sont créés et utilisés par WebGLRenderer .