TSL Node: cameraWorldQuaternion

[PoseidonEnergy]

This pull request adds a cameraWorldQuaternion TSL node.

This node is helpful for when one needs to access the current camera's rotation relative to the world as a TSL node. For example, when creating a skybox material.

JSFiddle isn't saving the updates to the example, I'll update this when I get a new JSFiddle link.

See the bottom of this post for the original PR description (with original JSFiddle link).

const q = new THREE.Quaternion()
const cameraWorldQuaternion = THREE.uniform("vec4").onRenderUpdate(() => {
    return camera.getWorldQuaternion(q)
})

Original PR description (before updating it to only use a quaternion)

Here is an example of a skybox material using a cameraWorldRotation TSL node: https://jsfiddle.net/9b56L412

Related forum discussion: https://discourse.threejs.org/t/need-help-writing-a-true-skybox-tsl-shader-node/74406

This pull request is based on lines 69-74 in that JSFiddle:

const q = new THREE.Quaternion()
const e = new THREE.Euler()
const cameraWorldRotation = THREE.uniform("vec3").onRenderUpdate(() => {
    camera.getWorldQuaternion(q)
    return e.setFromQuaternion(q)
})

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	336.33 78.33	336.33 78.33	+0 B +0 B
WebGPU	547.45 151.77	547.6 151.83	+149 B +63 B
WebGPU Nodes	546.8 151.61	546.95 151.67	+149 B +64 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	465.78 112.28	465.78 112.28	+0 B +0 B
WebGPU	622.3 168.35	622.3 168.35	+0 B +0 B
WebGPU Nodes	577.17 157.62	577.17 157.62	+0 B +0 B

[WestLangley]

three.js is quaternion-based. I would advise sticking to quaternions. Get the world quaternion, instead. The world rotation was removed from the library years ago.

[PoseidonEnergy]

three.js is quaternion-based. I would advise sticking to quaternions. Get the world quaternion, instead. The world rotation was removed from the library years ago.

Done

[sunag]

It may be too early to implement quaternions and eulers relating to objects, matrices normally do the job and are more performant. Try using the example below:

import { mat3, texture, cameraWorldMatrix, positionView, equirectUV } ...

//

const viewUV = mat3( cameraWorldMatrix ).mul( positionView.normalize() );

material.colorNode = texture( texture, equirectUV( viewUV ) );

[Mugen87]

Closing for now.