diff --git a/examples/jsm/nodes/core/NodeBuilder.js b/examples/jsm/nodes/core/NodeBuilder.js index 6fa1f8d56d3f79..3855dba05c3677 100644 --- a/examples/jsm/nodes/core/NodeBuilder.js +++ b/examples/jsm/nodes/core/NodeBuilder.js @@ -575,6 +575,7 @@ class NodeBuilder { if ( vecNum !== null ) return Number( vecNum[ 1 ] ); if ( vecType === 'float' || vecType === 'bool' || vecType === 'int' || vecType === 'uint' ) return 1; + if ( /mat2/.test( type ) === true ) return 4; if ( /mat3/.test( type ) === true ) return 9; if ( /mat4/.test( type ) === true ) return 16; diff --git a/examples/jsm/nodes/core/constants.js b/examples/jsm/nodes/core/constants.js index db85dd24520db2..1ef0448f8dccca 100644 --- a/examples/jsm/nodes/core/constants.js +++ b/examples/jsm/nodes/core/constants.js @@ -17,6 +17,7 @@ export const NodeType = { VECTOR2: 'vec2', VECTOR3: 'vec3', VECTOR4: 'vec4', + MATRIX2: 'mat2', MATRIX3: 'mat3', MATRIX4: 'mat4' }; diff --git a/examples/jsm/nodes/materials/SpriteNodeMaterial.js b/examples/jsm/nodes/materials/SpriteNodeMaterial.js index 4580ba777175f8..e6b54b5613dbe5 100644 --- a/examples/jsm/nodes/materials/SpriteNodeMaterial.js +++ b/examples/jsm/nodes/materials/SpriteNodeMaterial.js @@ -61,13 +61,7 @@ class SpriteNodeMaterial extends NodeMaterial { const rotation = float( rotationNode || materialRotation ); - const cosAngle = rotation.cos(); - const sinAngle = rotation.sin(); - - const rotatedPosition = vec2( // @TODO: Maybe we can create mat2 and write something like rotationMatrix.mul( alignedPosition )? - vec2( cosAngle, sinAngle.negate() ).dot( alignedPosition ), - vec2( sinAngle, cosAngle ).dot( alignedPosition ) - ); + const rotatedPosition = alignedPosition.rotate( rotation ); mvPosition = vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw ); diff --git a/examples/jsm/nodes/shadernode/ShaderNode.js b/examples/jsm/nodes/shadernode/ShaderNode.js index 13a547070caa3b..edf7a754bf5a78 100644 --- a/examples/jsm/nodes/shadernode/ShaderNode.js +++ b/examples/jsm/nodes/shadernode/ShaderNode.js @@ -574,6 +574,11 @@ export const ivec4 = new ConvertType( 'ivec4' ); export const uvec4 = new ConvertType( 'uvec4' ); export const bvec4 = new ConvertType( 'bvec4' ); +export const mat2 = new ConvertType( 'mat2' ); +export const imat2 = new ConvertType( 'imat2' ); +export const umat2 = new ConvertType( 'umat2' ); +export const bmat2 = new ConvertType( 'bmat2' ); + export const mat3 = new ConvertType( 'mat3' ); export const imat3 = new ConvertType( 'imat3' ); export const umat3 = new ConvertType( 'umat3' ); @@ -604,6 +609,10 @@ addNodeElement( 'vec4', vec4 ); addNodeElement( 'ivec4', ivec4 ); addNodeElement( 'uvec4', uvec4 ); addNodeElement( 'bvec4', bvec4 ); +addNodeElement( 'mat2', mat2 ); +addNodeElement( 'imat2', imat2 ); +addNodeElement( 'umat2', umat2 ); +addNodeElement( 'bmat2', bmat2 ); addNodeElement( 'mat3', mat3 ); addNodeElement( 'imat3', imat3 ); addNodeElement( 'umat3', umat3 ); diff --git a/examples/jsm/nodes/utils/RotateNode.js b/examples/jsm/nodes/utils/RotateNode.js index 902d48ddf04fc1..2dc9be8d63b1b0 100644 --- a/examples/jsm/nodes/utils/RotateNode.js +++ b/examples/jsm/nodes/utils/RotateNode.js @@ -4,6 +4,7 @@ import { addNodeElement, nodeProxy, vec4, + mat2, mat4, } from '../shadernode/ShaderNode.js'; import { cos, sin } from '../math/MathNode.js'; @@ -12,23 +13,47 @@ class RotateNode extends TempNode { constructor( positionNode, rotationNode ) { - super( 'vec3' ); + super(); this.positionNode = positionNode; this.rotationNode = rotationNode; } - setup() { + getNodeType( builder ) { + + return this.positionNode.getNodeType( builder ); + + } + + setup( builder ) { const { rotationNode, positionNode } = this; - const rotation = rotationNode; - const rotationXMatrix = mat4( vec4( 1.0, 0.0, 0.0, 0.0 ), vec4( 0.0, cos( rotation.x ), sin( rotation.x ).negate(), 0.0 ), vec4( 0.0, sin( rotation.x ), cos( rotation.x ), 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); - const rotationYMatrix = mat4( vec4( cos( rotation.y ), 0.0, sin( rotation.y ), 0.0 ), vec4( 0.0, 1.0, 0.0, 0.0 ), vec4( sin( rotation.y ).negate(), 0.0, cos( rotation.y ), 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); - const rotationZMatrix = mat4( vec4( cos( rotation.z ), sin( rotation.z ).negate(), 0.0, 0.0 ), vec4( sin( rotation.z ), cos( rotation.z ), 0.0, 0.0 ), vec4( 0.0, 0.0, 1.0, 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); + const nodeType = this.getNodeType( builder ); + + if ( nodeType === 'vec2' ) { + + const cosAngle = rotationNode.cos(); + const sinAngle = rotationNode.sin(); + + const rotationMatrix = mat2( + cosAngle, sinAngle, + sinAngle.negate(), cosAngle + ); + + return rotationMatrix.mul( positionNode ); + + } else { + + const rotation = rotationNode; + const rotationXMatrix = mat4( vec4( 1.0, 0.0, 0.0, 0.0 ), vec4( 0.0, cos( rotation.x ), sin( rotation.x ).negate(), 0.0 ), vec4( 0.0, sin( rotation.x ), cos( rotation.x ), 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); + const rotationYMatrix = mat4( vec4( cos( rotation.y ), 0.0, sin( rotation.y ), 0.0 ), vec4( 0.0, 1.0, 0.0, 0.0 ), vec4( sin( rotation.y ).negate(), 0.0, cos( rotation.y ), 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); + const rotationZMatrix = mat4( vec4( cos( rotation.z ), sin( rotation.z ).negate(), 0.0, 0.0 ), vec4( sin( rotation.z ), cos( rotation.z ), 0.0, 0.0 ), vec4( 0.0, 0.0, 1.0, 0.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) ); + + return rotationXMatrix.mul( rotationYMatrix ).mul( rotationZMatrix ).mul( vec4( positionNode, 1.0 ) ).xyz; - return rotationXMatrix.mul( rotationYMatrix ).mul( rotationZMatrix ).mul( vec4( positionNode, 1.0 ) ).xyz; + } } diff --git a/examples/jsm/nodes/utils/RotateUVNode.js b/examples/jsm/nodes/utils/RotateUVNode.js index 45bfe1cdb6804e..4f432cd09d7873 100644 --- a/examples/jsm/nodes/utils/RotateUVNode.js +++ b/examples/jsm/nodes/utils/RotateUVNode.js @@ -18,17 +18,9 @@ class RotateUVNode extends TempNode { const { uvNode, rotationNode, centerNode } = this; - const cosAngle = rotationNode.cos(); - const sinAngle = rotationNode.sin(); - const vector = uvNode.sub( centerNode ); - const rotatedVector = vec2( // @TODO: Maybe we can create mat2 and write something like rotationMatrix.mul( vector )? - vec2( cosAngle, sinAngle ).dot( vector ), - vec2( sinAngle.negate(), cosAngle ).dot( vector ) - ); - - return rotatedVector.add( centerNode ); + return vector.rotate( rotationNode ).add( centerNode ); } diff --git a/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js b/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js index 7cf6aead3af1a2..e8d558244ddc24 100644 --- a/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js +++ b/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js @@ -55,6 +55,11 @@ const wgslTypeLib = { uvec4: 'vec4', bvec4: 'vec4', + mat2: 'mat2x2', + imat2: 'mat2x2', + umat2: 'mat2x2', + bmat2: 'mat2x2', + mat3: 'mat3x3', imat3: 'mat3x3', umat3: 'mat3x3',