Instanced Mesh

outlines.tsx

// Works                                                             
//                                                                   
function simpleMesh() {                                              
  const mesh = new THREE.Mesh(geometry, material)                    
  let b = beasties[1]                                                
  let c = b.getCell()                                                
  mesh.position.set(c.x, c.y, 0)                                     
  material.uniforms['radius'] = { value: c.r }                       
  material.uniforms['screenSize'] = { value: screenSize }            
  material.uniforms['thickness'] = { value: 10 }                     
  material.uniforms['color'] = { value: color }                      
  return mesh                                                        
}                                                                    
                                                                     
// No workie :-(                                                     
//                                                                   
function ezMesh() {                                                  
  material.uniforms = {                                              
    radius: { value: EZ.createTexture_float(count) },                
    screenSize: { value: EZ.createTexture_vec2(count) },             
    thickness: { value: EZ.createTexture_float(count) },             
    color: { value: EZ.createTexture_vec3(count) },                  
  }                                                                  
  let col = new THREE.Vector3(color.r, color.g, color.b)             
  let mesh = new InstancedMesh2(gl, count, geometry, material);      
  mesh['renderOrder'] = z + Z.OUTLINE                                
  mesh.createInstances((obj, i) => {                                 
    let b = beasties[i]                                              
    let cell = b.getCell()                                           
    obj.position.set(cell.x, cell.y, 0)                              
    obj.setUniform('radius', cell.r)                                 
    obj.setUniform('screenSize', screenSize)                         
    obj.setUniform('thickness', 10)                                  
    obj.setUniform('color', col)                                     
  })                                                                 
  return mesh                                                        
}                                                                    
                                                                     
let mesh = ezMesh()                                                  
                                                                     
return <primitive object={mesh} />