The Studios suite

I am near the beginning of a new project for internal use called ‘The Studios’. I have been building many pages which include scenes for back office tasks, and unless I changed I would have to build many more.

I have also just re-assessed my code base, and the overall structure was too reliant on sub-classing meshes going too deep. Kind of a too much of a good thing story. So I am refactoring like everything & cutting back on a level.

This project, written entirely in Typescript & computer generated Javascript for meshes, is actually going replace & update a bunch of old ones, & be more re-usable for other characters / meshes.

A studio is basically a set of 3 sided rooms (there will only be geo for 1). Each room will perform a different task. Planned are:

  • IK Animation Studio.
  • Materials Fitting Studio (replaces XR Sandbox that is being abandoned. Still keeping portal for products though.)
  • Expression Compositor.

The scene origin is the floor under the shown character. There are areas for controls on both sides. They probably going to be larger than normal, so a XR controller can hit them from a distance.

While most work will be done on a desktop, I added a balcony with a view for XR. I am probably also going to use this to try out some concepts I have been thinking about for XR here.

Here are 2 screen shots from both sides, on a desktop. The walls, floor, ceiling, & balcony view are all one sided as to not get in the way for the desktop. The view is pretty awesome in XR.

From back:

From Front:


Also, @Deltakosh , I have sub-classed BoneIKController adding just a couple of lines to allow the rotation of target mesh to also be used to rotate the next bone down (wrist, foot). I will not PR it, as changes would also be required for GLB. I am not doing that. If you want it, let me know.

6 Likes

Let me pull @adam in as he is the mastermind behind BoneIKController

I’ll just leave the sub-class here.

export class BoneIKController extends BABYLON.BoneIKController {
    /**
     * A switch indicating that the rotation from the target mesh also be used to rotate
     * any child bones of the IK bone.
     */
    private _childRotationBone : Bone;

    constructor(mesh: BABYLON.TransformNode,
        bone: Bone,
        options?: {
            targetMesh?: BABYLON.TransformNode, // this does not have to be a mesh; named like for back compatability
            poleTargetMesh?: BABYLON.TransformNode,
            poleTargetBone?: Bone,
            poleTargetLocalOffset?: BABYLON.Vector3,
            poleAngle?: number,
            bendAxis?: BABYLON.Vector3,
            maxAngle?: number,
            slerpAmount?: number,
            childRotationBone?: Bone // additional option added
        }) {
        super(mesh, bone, options);
         if (options && options.childRotationBone) {
             this._childRotationBone = options.childRotationBone
         }
    }

    public update() : void {
        super.update();
        if (this._childRotationBone) this._childRotationBone.setRotation(this.targetMesh.rotation);
    }
}

It is very simple:

  • Add an option childRotationBone
  • Add a line in constructor to assign a private property if the option was used
  • Execute a line in update if the private property was found.

Nice! I don’t see why that couldn’t be added as an option. @JCPalmer

As I have gotten around to adding teleportation to be able to move about without walking, I have noticed that the size of the gizmo shrinks, the closer that you move to it. I have other scenes that use a gizmo, and they shrink as well. It has always seems a little weird, but never as disastrous as when in XR.

The upshot is unless this behavior cannot be shut off, they are utterly worthless in XR. Not only is it counter intuitive for something to get smaller as you get closer, they absolutely tiny in XR because you can get so much closer. It is like you are chasing it, but can never catch it till they are just more or less gone.

Even to get to work at all for metered scale, I am already doing this to bring the size down from gigantic by passing 0.1 to this:

public scaleGizmo(amt : number) : void {
    const rotGizmo = this._gizmoManager.gizmos.rotationGizmo;
    (<BABYLON.Mesh> rotGizmo.xGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> rotGizmo.yGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> rotGizmo.zGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);

    // make the position just a little bigger
    amt *= 1.2;
    const posGizmo = this._gizmoManager.gizmos.positionGizmo;
    (<BABYLON.Mesh> posGizmo.xGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> posGizmo.yGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> posGizmo.zGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
}

I do not know much about these or this UtilityLayer, is there a way to stop this?

1 Like

Well, on a source code scavenger hunt, I found the updateScale property. While it is at the Gizmo level, I found it only works when set at the individual axis-es. I had to bump up my passing arg to 0.5, but it now works!

And does it. I have been close to “people” meshes in XR before, but moving their arms around when you are right next to them is wild.

public scaleGizmo(amt : number) : void {
    const rotGizmo = this._gizmoManager.gizmos.rotationGizmo;
    (<BABYLON.Mesh> rotGizmo.xGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> rotGizmo.yGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> rotGizmo.zGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    rotGizmo.xGizmo.updateScale = false;
    rotGizmo.yGizmo.updateScale = false;
    rotGizmo.zGizmo.updateScale = false;

    // make the position just a little bigger
    amt *= 1.2;
    const posGizmo = this._gizmoManager.gizmos.positionGizmo;
    (<BABYLON.Mesh> posGizmo.xGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> posGizmo.yGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    (<BABYLON.Mesh> posGizmo.zGizmo._rootMesh.getChildren()[0]).scaling.set(amt, amt, amt);
    posGizmo.xGizmo.updateScale = false;
    posGizmo.yGizmo.updateScale = false;
    posGizmo.zGizmo.updateScale = false;
}
1 Like

Adding @Cedric to the conversion since I see talk of Gizmos