Prototype

Within a couple of days I had placed this rough and dirty prototype in the hands of the client and let them play. I had to communicate where this could materialize from, explaining that the ‘orbs’ and ‘satellites’ would have a glassy material, the navigation may be different, number of orbs in view, orbs would have labels- as some options to research.

View Prototype

Testing materials & performance

WebGL is a GPU hog and will make your laptop sound like it’s about to take off. So I had to get the best bang for your buck as far as performance went. I researched reflections on all the orbs, but realized it was going to be too taxing on the GPU.

View material test 

Review 1

Ready for review – whew… The first conference was going to launch with three categories, as the client could not provide all the brochures and assets for the ‘Targets’ category. Navigation in, labels on, tons of data feed in. There were some bugs and kinks that I still needed to work out.

View Review 

Release Candidate

This was the release candidate that was sent out the first conference in Las Vegas. It was received very well, the client was thrilled and proud to show off their kiosk. Their feedback was positive, and was looking forward to the next version with the added Targets.

View Release

/**
 * Helper function to get quaternion from src
 * looking at target 
 */
const getLookAtQuaternion = (srcObj, targetObj) => {
    var q1 = new THREE.Quaternion();
    var m1 = new THREE.Matrix4();
    var target = new THREE.Vector3();
    var position = new THREE.Vector3();
    var quaternion = srcObj.quaternion.clone();
    const { x, y, z } = targetObj;
    target.set(x, y, z);
    var parent = srcObj.parent;
    srcObj.updateWorldMatrix(true, false);
    position.setFromMatrixPosition(srcObj.matrixWorld);
    m1.lookAt(target, position, srcObj.up);
    quaternion.setFromRotationMatrix(m1);
    if (parent) {
        m1.extractRotation(parent.matrixWorld);
        q1.setFromRotationMatrix(m1);
        quaternion.premultiply(q1.inverse());
    }
    return quaternion
}

/**
 * On ever render tick, have the label and cta move its
 * quaternion towards the camera
 */
update = slerpSpeedOverride => {
    const {
        type
    } = this.data;
    const q = getLookAtQuaternion(this.textContainer, ThreeView.camera.position)
    this.textContainer.quaternion.slerp(q, slerpSpeedOverride || this.slerpSpeed);
    if (this.plane) {
        this.plane.quaternion.slerp(q, 1);
    }   
}