gkjohnson/batched-material-properties-demo

Demonstration of rendering three.js' BatchedMesh with different material properties in one draw call.

Graphics enthusiast, three.js collaborator, open source maintainer, former Mars helicopter operator & rover tool designer. If you like my work consider becoming a Github Sponsor. Open for contract work for robotics and data visualization, shader development, interactive 3d graphics, and contributions to any of the following projects!

✨ Project Highlights

• three-sketches
• three-mesh-bvh
• three-gpu-pathtracer
• three-bvh-csg
• mrdoob/three.js

🪐 Robotics & NASA JPL

• NASA-AMMOS/3DTilesRendererJS
• NASA-AMMOS/timecraftjs
• NASA-AMMOS/CameraModelUtilsJS
• urdf-loaders
• urdf-exporter
• xacro-parser
• closed-chain-ik-js

🌱 Miscellaneous

• threejs-sandbox
• three-edge-projection
• webxr-sandbox
• webgl-gpu-power-estimation
• js-framerate-optimizer
• source-engine-model-loader

batched-material-properties-demo's Issues

amazing

just wanted to say I love you work on batched meshes

Found this, dunno if its any help/can give ideas
https://www.khronos.org/assets/uploads/developers/presentations/Philip-Taylor---Leveraging-multi-draw-to-improve-performance.pdf

btw, had a a little bit fund with threejs and batchedmesh and its really cool what performance boost it gives..

msedge_XhSzH36S4F.mp4

Some info whats its doing.. (yes its not a box.. but it was in the beginning 😂 )

This is 5700xt and some amd 8 core cpu a few years old..

const material = new MeshStandardMaterial({ color: 0x00ff00 });

const boxes = 1000;
const box = new SphereGeometry( 5, 50, 50 );
const maxIndexCount = (box.getIndex()?.count || 1) * boxes;
const maxVertexCount = box.getAttribute("position").count * boxes;

for (let y = 0; y < 40; y++) {
  const mesh = new BatchedMesh(boxes, maxVertexCount, maxIndexCount, material);
  mesh.sortObjects = false;
  mesh.perObjectFrustumCulled = false;

  for (let i = 0; i < boxes; i++) {
    const id = mesh.addGeometry(box);
    mesh.setMatrixAt(id, randomizeMatrix(matrix));
  }
  scene.add(mesh);
}

animate();