docs: add example for InstancedUniformsMesh

packages/troika-examples/index.js

@@ -16,6 +16,7 @@ import CurveAnim from './curve-anim/CurveAnimExample'
 import Canvas2DExample from './canvas2d/Canvas2DExample'
 import EasingsExample from './easings/EasingsExample'
 import InstanceableExample from './instanceable/InstanceableExample'
+import InstancedUniformsMeshExample from './instanced-uniforms-mesh/InstancedUniformsMeshExample.jsx'
 import InceptionExample from './inception/InceptionExample'
 import Bezier3DExample from './bezier-3d/Bezier3DExample'
 
@@ -40,6 +41,7 @@ const EXAMPLES = [
   {id: 'twoDee', name: 'Canvas2D', component: Canvas2DExample, disableXR:true},
   {id: 'easings', name: 'Animation Easings', component: EasingsExample, disableXR:true},
   {id: 'instanceable', name: 'Instanceable Objects', component: InstanceableExample},
+  {id: 'instancedUniformsMesh', name: 'InstancedUniformsMesh', component: InstancedUniformsMeshExample},
   {id: 'inception', name: 'Inception', component: InceptionExample}
 ]
 

packages/troika-examples/instanced-uniforms-mesh/Beziers.js

@@ -0,0 +1,150 @@
+import { Object3DFacade } from 'troika-3d'
+import { BezierMesh } from 'troika-three-utils'
+import { InstancedUniformsMesh } from 'three-instanced-uniforms-mesh'
+import { Color, Matrix4, Vector3 } from 'three'
+
+const count = 100
+const vec3 = new Vector3()
+const mat4 = new Matrix4()
+const color = new Color()
+const twoPi = Math.PI * 2
+
+export class Beziers extends Object3DFacade {
+  constructor (parent) {
+    // Create a template BezierMesh and grab its geometry and material
+    const { geometry, material } = new BezierMesh()
+    material.uniforms.radius.value = 0.01
+
+    // Create InstancedUniformsMesh and init static instance values
+    const mesh = new InstancedUniformsMesh(geometry, material, count)
+    for (let i = 0; i < count; i++) {
+      mesh.setMatrixAt(i, mat4.identity()) //must fill matrix array
+      const angle = (i / count) * (Math.PI * 2)
+
+      // Outer points will be stationary
+      mesh.setUniformAt('pointB', i, vec3ForAngle(angle, 2))
+
+      // Rainbow colors
+      mesh.setUniformAt(
+        'diffuse',
+        i,
+        color
+          .setRGB(Math.sin(angle + 3), Math.sin(angle + 1), Math.sin(angle * 2))
+          .addScalar(0.8)
+      )
+    }
+
+    super(parent, mesh)
+
+    this.addEventListener('beforerender', () => {
+      // Adjust the inner point and control point uniforms in wave patterns
+      const angleShift = ((Date.now() % 3000) / 3000) * twoPi
+      for (let i = 0; i < count; i++) {
+        const angle = (i / count) * (Math.PI * 2)
+        mesh.setUniformAt(
+          'pointA',
+          i,
+          vec3ForAngle(angle, 0.3).setZ(Math.sin(angle + angleShift) * 0.2)
+        )
+        mesh.setUniformAt(
+          'controlA',
+          i,
+          vec3ForAngle(angle, 0.6).setZ(Math.cos(angle * 2 + angleShift) * 0.8)
+        )
+        mesh.setUniformAt(
+          'controlB',
+          i,
+          vec3ForAngle(angle + Math.cos(angleShift) / 3, 1.7).setZ(
+            Math.sin(angle * 3 + angleShift) * 0.8
+          )
+        )
+        // this.mesh.setUniformAt(
+        //   'radius',
+        //   i,
+        //   (Math.sin((angle + angleShift)) + 1.1) * 0.2
+        // )
+      }
+    })
+  }
+}
+
+function vec3ForAngle (angle, radius) {
+  return vec3.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0)
+}
+
+export class App  {
+  init () {
+    // Create a BezierMesh from which we can grab the geometry and material
+    const bezierTemplate = new BezierMesh()
+    bezierTemplate.material.uniforms.radius.value = 0.1
+    // bezierTemplate.material.roughness = 0.3
+    // bezierTemplate.material.metalness = 0.8
+
+    // Create the InstancedUniformsMesh from that BezierMesh template
+    const mesh = new InstancedUniformsMesh(
+      bezierTemplate.geometry,
+      bezierTemplate.material,
+      count
+    )
+
+    // Set static instance properties
+    for (let i = 0; i < count; i++) {
+      mesh.setMatrixAt(i, mat4.identity()) //must fill matrix array
+      const angle = (i / count) * (Math.PI * 2)
+
+      // Outer points will be stationary
+      mesh.setUniformAt('pointB', i, vec3ForAngle(angle, 20))
+
+      // Rainbow colors
+      mesh.setUniformAt(
+        'diffuse',
+        i,
+        color
+          .setRGB(Math.sin(angle + 3), Math.sin(angle + 1), Math.sin(angle * 2))
+          .addScalar(0.8)
+      )
+    }
+
+    const light = new DirectionalLight()
+    light.position.set(0, 1, 1)
+
+    this.scene.add(mesh)
+    this.scene.add(light)
+    this.mesh = mesh
+    this.tick()
+  }
+
+  update () {
+    // Adjust the inner point and control point uniforms in wave patterns
+    const angleShift = ((Date.now() % 3000) / 3000) * twoPi
+    for (let i = 0; i < count; i++) {
+      const angle = (i / count) * (Math.PI * 2)
+      this.mesh.setUniformAt(
+        'pointA',
+        i,
+        vec3ForAngle(angle, 3).setZ(Math.sin(angle + angleShift) * 2)
+      )
+      this.mesh.setUniformAt(
+        'controlA',
+        i,
+        vec3ForAngle(angle, 6).setZ(Math.cos(angle * 2 + angleShift) * 8)
+      )
+      this.mesh.setUniformAt(
+        'controlB',
+        i,
+        vec3ForAngle(angle + Math.cos(angleShift) / 3, 17).setZ(
+          Math.sin(angle * 3 + angleShift) * 8
+        )
+      )
+      // this.mesh.setUniformAt(
+      //   'radius',
+      //   i,
+      //   (Math.sin((angle + angleShift)) + 1.1) * 0.2
+      // )
+    }
+
+    // Rotate the whole thing slowly
+    this.mesh.rotation.x += 0.008
+    this.mesh.rotation.y += 0.002
+  }
+}

packages/troika-examples/instanced-uniforms-mesh/InstancedUniformsMeshExample.jsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import T from 'prop-types'
+import {Canvas3D} from 'troika-3d'
+import { ExampleConfigurator } from '../_shared/ExampleConfigurator.js'
+import { Beziers } from './Beziers.js'
+
+
+class InstancedUniformsMeshExample extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let state = this.state
+    let {width, height} = this.props
+
+    return (
+      <div>
+        <Canvas3D
+          antialias
+          stats={ this.props.stats }
+          width={ width }
+          height={ height }
+          lights={ [
+            { type: 'directional', x: 0, y: 1, z: 1 }
+          ] }
+          camera={ {
+            z: 5,
+          } }
+          objects={ [
+            {
+              facade: Beziers,
+              animation: [
+                {
+                  from: {rotateX: 0},
+                  to: {rotateX: Math.PI * 2},
+                  duration: 13000,
+                  iterations: Infinity
+                },
+                {
+                  from: {rotateY: 0},
+                  to: {rotateY: Math.PI * 2},
+                  duration: 40000,
+                  iterations: Infinity
+                }
+              ]
+            }
+            /*{
+              key: 'config',
+              isXR: !!this.props.vr,
+              facade: ExampleConfigurator,
+              data: state,
+              onUpdate: this.setState.bind(this),
+              items: [
+                {type: 'boolean', path: 'wireframe', label: 'Wireframe'}
+              ]
+            }*/
+          ] }
+        />
+
+        <div className="example_desc">
+          <p>Demonstration of InstancedUniformsMesh from the <a href="https://github.com/protectwise/troika/tree/master/packages/three-instanced-uniforms-mesh">three-instanced-uniforms-mesh</a> package.</p>
+        </div>
+      </div>
+    )
+  }
+}
+
+InstancedUniformsMeshExample.propTypes = {
+  width: T.number,
+  height: T.number
+}
+
+export default InstancedUniformsMeshExample

packages/troika-examples/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^16.5.2",
     "three": "^0.121.1",
     "three-line-2d": "^1.1.6",
+    "three-instanced-uniforms-mesh": "^0.38.0",
     "troika-2d": "^0.38.0",
     "troika-3d": "^0.38.0",
     "troika-3d-text": "^0.38.0",