Investigation into rotation issues in react-zdog

[Simon Fish]

@drcmda recommended in this comment that there's investigation in this repository to see why rotation might result in the issue I've found. To quote the linked issue:

Creating the canvas with rotate already set results in a different rotation than changing the rotation after the initial render.

Using Zdog alone, I've found this not to be the case, but @drcmda believes that the issue is down to a quirk in Zdog that neither of us fully understand yet.

Sample of the issue: https://codesandbox.io/s/winter-sunset-csx9b

[David DeSandro]

Thanks for reporting this issue. I understand this is a react-zdog demo, but I'd would appreciate a vanilla demo so I can better diagnose the issue. See Submitting Issues in the contributing guidelines for forkable CodePens.

[—]

is there something in general that we need to do after setting rotations, like some calling update fn, etc? react-zdog doesn't do much, it just forwards props directly to zdog without altering anything in between. i receive an object { x, y, z } and pass it to zdog via Zdog.extend(instance, newProps):

    Zdog.extend(node, props)
    node.updateFlatGraph()
    illu.updateGraph()

but rotations do behave very weird sometimes, can't put my finger on it.

Btw, is there any difference between updateGraph and updateFlatGraph? Should i call both?

[Simon Fish]

Here's how the rotation supplied in the react demo looks using vanilla Zdog, @desandro.

[—]

Does it have the same problem? How should it look like?

[Simon Fish]

Notice that the illu is initialised with the same rotation as the React example, but what's shown isn't anywhere close to that same angle.

By changing the rotation values of the React example to { x: 0, y: 0, z: 0 } using the text boxes in the bottom left that control state, you'll get the same rotation shown in the plain Zdog example.

[—]

shouldn't x: 0.3 * Zdog.TAU, y: 0.3 * Zdog.TAU, z: 0.3 * Zdog.TAU yield isometric perspective tho?

[Simon Fish]

I assume vanilla Zdog rotates as intended.

I settled on the following values to get a good-looking isometric-ish perspective in my demo:

x: Zdog.TAU / 6,
y: 0
z: (-9 * Zdog.TAU) / 16

Setting a rotation of 0.3* Zdog.TAU on the illustration for all values yields this in standard Zdog and this in react-zdog.

[David DeSandro]

I've found that rotating multiple axises is inconsistent and wonky. Its one of the downfalls of using a naive rotation math build on basic trig and not matrixes and quaternions. That said ...

shouldn't x: 0.3 * Zdog.TAU, y: 0.3 * Zdog.TAU, z: 0.3 * Zdog.TAU yield isometric perspective tho?

No. If you want isometric perspective use

rotate: { x: TAU * -35/360, y: TAU * 1/8 },

See Dot Cube demo

[—]

i think these are two issues, i accidentally double the rotation transform by spreading the props over the main illu and the containing anchor base element. this is solved.

@desandro ah this makes sense, axis rotation without matrix transforms can be messy indeed.