@plastic-software/three 0.179.0 → 0.181.1

package/examples/jsm/postprocessing/SSRPass.js

@@ -137,6 +137,8 @@ class SSRPass extends Pass {
 
 		this._selects = selects;
 
+		this._resolutionScale = 1;
+
 		/**
 		 * Whether the pass is selective or not.
 		 *
@@ -457,6 +459,29 @@ class SSRPass extends Pass {
 
 	}
 
+
+	/**
+	 * The resolution scale. Valid values are in the range
+	 * `[0,1]`. `1` means best quality but also results in
+	 * more computational overhead. Setting to `0.5` means
+	 * the effect is computed in half-resolution.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get resolutionScale() {
+
+		return this._resolutionScale;
+
+	}
+
+	set resolutionScale( value ) {
+
+		this._resolutionScale = value;
+		this.setSize( this.width, this.height ); // force a resize when resolution scaling changes
+
+	}
+
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
@@ -661,23 +686,27 @@ class SSRPass extends Pass {
 		this.width = width;
 		this.height = height;
 
-		this.ssrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );
+		const effectiveWidth = Math.round( this.resolutionScale * width );
+		const effectiveHeight = Math.round( this.resolutionScale * height );
+
+		this.ssrMaterial.defines.MAX_STEP = Math.sqrt( effectiveWidth * effectiveWidth + effectiveHeight * effectiveHeight );
 		this.ssrMaterial.needsUpdate = true;
+
 		this.beautyRenderTarget.setSize( width, height );
-		this.prevRenderTarget.setSize( width, height );
-		this.ssrRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
 		this.metalnessRenderTarget.setSize( width, height );
-		this.blurRenderTarget.setSize( width, height );
-		this.blurRenderTarget2.setSize( width, height );
+		this.ssrRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.prevRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.blurRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.blurRenderTarget2.setSize( effectiveWidth, effectiveHeight );
 		// this.blurRenderTarget3.setSize(width, height);
 
-		this.ssrMaterial.uniforms[ 'resolution' ].value.set( width, height );
+		this.ssrMaterial.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
 		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 
-		this.blurMaterial.uniforms[ 'resolution' ].value.set( width, height );
-		this.blurMaterial2.uniforms[ 'resolution' ].value.set( width, height );
+		this.blurMaterial.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
+		this.blurMaterial2.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
 
 	}
 

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -22,7 +22,7 @@ import { LuminosityHighPassShader } from '../shaders/LuminosityHighPassShader.js
  * When using this pass, tone mapping must be enabled in the renderer settings.
  *
  * Reference:
- * - [Bloom in Unreal Engine]{@link https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/}
+ * - [Bloom in Unreal Engine](https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/)
  *
  * ```js
  * const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
@@ -145,7 +145,9 @@ class UnrealBloomPass extends Pass {
 		// gaussian blur materials
 
 		this.separableBlurMaterials = [];
-		const kernelSizeArray = [ 3, 5, 7, 9, 11 ];
+		// These sizes have been changed to account for the altered coefficients-calculation to avoid blockiness,
+		// while retaining the same blur-strength. For details see https://github.com/mrdoob/three.js/pull/31528
+		const kernelSizeArray = [ 6, 10, 14, 18, 22 ];
 		resx = Math.round( this.resolution.x / 2 );
 		resy = Math.round( this.resolution.y / 2 );
 
@@ -376,10 +378,11 @@ class UnrealBloomPass extends Pass {
 	_getSeparableBlurMaterial( kernelRadius ) {
 
 		const coefficients = [];
+		const sigma = kernelRadius / 3;
 
 		for ( let i = 0; i < kernelRadius; i ++ ) {
 
-			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );
 
 		}
 
@@ -420,10 +423,9 @@ class UnrealBloomPass extends Pass {
 						vec2 uvOffset = direction * invSize * x;
 						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset ).rgb;
 						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset ).rgb;
-						diffuseSum += (sample1 + sample2) * w;
-						weightSum += 2.0 * w;
+						diffuseSum += ( sample1 + sample2 ) * w;
 					}
-					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
+					gl_FragColor = vec4( diffuseSum, 1.0 );
 				}`
 		} );
 

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -16,7 +16,7 @@ class CSS2DObject extends Object3D {
 	/**
 	 * Constructs a new CSS2D object.
 	 *
-	 * @param {DOMElement} [element] - The DOM element.
+	 * @param {HTMLElement} [element] - The DOM element.
 	 */
 	constructor( element = document.createElement( 'div' ) ) {
 
@@ -34,7 +34,7 @@ class CSS2DObject extends Object3D {
 		/**
 		 * The DOM element which defines the appearance of this 3D object.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 * @readonly
 		 * @default true
 		 */
@@ -59,6 +59,7 @@ class CSS2DObject extends Object3D {
 			this.traverse( function ( object ) {
 
 				if (
+					object.element &&
 					object.element instanceof object.element.ownerDocument.defaultView.Element &&
 					object.element.parentNode !== null
 				) {
@@ -132,10 +133,20 @@ class CSS2DRenderer {
 		/**
 		 * The DOM where the renderer appends its child-elements.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 */
 		this.domElement = domElement;
 
+		/**
+		 * Controls whether the renderer assigns `z-index` values to CSS2DObject DOM elements.
+		 * If set to `true`, z-index values are assigned first based on the `renderOrder`
+		 * and secondly - the distance to the camera. If set to `false`, no z-index values are assigned.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.sortObjects = true;
+
 		/**
 		 * Returns an object containing the width and height of the renderer.
 		 *
@@ -165,7 +176,7 @@ class CSS2DRenderer {
 			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
 
 			renderObject( scene, scene, camera );
-			zOrder( scene );
+			if ( this.sortObjects ) zOrder( scene );
 
 		};
 
@@ -310,7 +321,7 @@ class CSS2DRenderer {
  * Constructor parameters of `CSS2DRenderer`.
  *
  * @typedef {Object} CSS2DRenderer~Parameters
- * @property {DOMElement} [element] - A DOM element where the renderer appends its child-elements.
+ * @property {HTMLElement} [element] - A DOM element where the renderer appends its child-elements.
  * If not passed in here, a new div element will be created.
  **/
 

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -22,7 +22,7 @@ class CSS3DObject extends Object3D {
 	/**
 	 * Constructs a new CSS3D object.
 	 *
-	 * @param {DOMElement} [element] - The DOM element.
+	 * @param {HTMLElement} [element] - The DOM element.
 	 */
 	constructor( element = document.createElement( 'div' ) ) {
 
@@ -40,7 +40,7 @@ class CSS3DObject extends Object3D {
 		/**
 		 * The DOM element which defines the appearance of this 3D object.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 * @readonly
 		 * @default true
 		 */
@@ -56,6 +56,7 @@ class CSS3DObject extends Object3D {
 			this.traverse( function ( object ) {
 
 				if (
+					object.element &&
 					object.element instanceof object.element.ownerDocument.defaultView.Element &&
 					object.element.parentNode !== null
 				) {
@@ -94,7 +95,7 @@ class CSS3DSprite extends CSS3DObject {
 	/**
 	 * Constructs a new CSS3D sprite object.
 	 *
-	 * @param {DOMElement} [element] - The DOM element.
+	 * @param {HTMLElement} [element] - The DOM element.
 	 */
 	constructor( element ) {
 
@@ -138,7 +139,7 @@ const _matrix2 = new Matrix4();
 
 /**
  * This renderer can be used to apply hierarchical 3D transformations to DOM elements
- * via the CSS3 [transform]{@link https://www.w3schools.com/cssref/css3_pr_transform.asp} property.
+ * via the CSS3 [transform](https://www.w3schools.com/cssref/css3_pr_transform.asp) property.
  * `CSS3DRenderer` is particularly interesting if you want to apply 3D effects to a website without
  * canvas based rendering. It can also be used in order to combine DOM elements with WebGLcontent.
  *
@@ -179,7 +180,7 @@ class CSS3DRenderer {
 		/**
 		 * The DOM where the renderer appends its child-elements.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 */
 		this.domElement = domElement;
 
@@ -446,7 +447,7 @@ class CSS3DRenderer {
  * Constructor parameters of `CSS3DRenderer`.
  *
  * @typedef {Object} CSS3DRenderer~Parameters
- * @property {DOMElement} [element] - A DOM element where the renderer appends its child-elements.
+ * @property {HTMLElement} [element] - A DOM element where the renderer appends its child-elements.
  * If not passed in here, a new div element will be created.
  **/
 

package/examples/jsm/renderers/SVGRenderer.js

@@ -120,7 +120,7 @@ class SVGRenderer {
 		/**
 		 * The DOM where the renderer appends its child-elements.
 		 *
-		 * @type {DOMElement}
+		 * @type {SVGSVGElement}
 		 */
 		this.domElement = _svg;
 

package/examples/jsm/shaders/ACESFilmicToneMappingShader.js

@@ -5,7 +5,7 @@
 
 /**
  * ACES Filmic Tone Mapping Shader by Stephen Hill.
- * Reference: [ltc_blit.fs]{@link https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs}
+ * Reference: [ltc_blit.fs](https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs)
  *
  * This implementation of ACES is modified to accommodate a brighter viewing environment.
  * The scale factor of 1/0.6 is subjective. See discussion in #19621.

package/examples/jsm/shaders/AfterimageShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Inspired by [Three.js FBO motion trails]{@link https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&}.
+ * Inspired by [Three.js FBO motion trails](https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BleachBypassShader.js

@@ -6,7 +6,7 @@
 
 /**
  * Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass] based on
- * [Nvidia Shader library]{@link http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass}.
+ * [Nvidia Shader library](http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BokehShader.js

@@ -5,7 +5,7 @@
 
 /**
  * Depth-of-field shader with bokeh ported from
- * [GLSL shader by Martins Upitis]{@link http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html}.
+ * [GLSL shader by Martins Upitis](http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BokehShader2.js

@@ -9,7 +9,7 @@ import {
 
 /**
  * Depth-of-field shader with bokeh ported from
- * [GLSL shader by Martins Upitis]{@link http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)}.
+ * [GLSL shader by Martins Upitis](http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)).
  *
  * Requires #define RINGS and SAMPLES integers
  *

package/examples/jsm/shaders/DotScreenShader.js

@@ -8,7 +8,7 @@ import {
  */
 
 /**
- * Dot screen shader based on [glfx.js sepia shader]{@link https://github.com/evanw/glfx.js}.
+ * Dot screen shader based on [glfx.js sepia shader](https://github.com/evanw/glfx.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/FocusShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Focus shader based on [PaintEffect postprocess from ro.me]{@link http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js}.
+ * Focus shader based on [PaintEffect postprocess from ro.me](http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/GTAOShader.js

@@ -15,8 +15,8 @@ import {
  * GTAO shader. Use by {@link GTAOPass}.
  *
  * References:
- * - [Practical Realtime Strategies for Accurate Indirect Occlusion]{@link https://iryoku.com/downloads/Practical-Realtime-Strategies-for-Accurate-Indirect-Occlusion.pdf}.
- * - [Horizon-Based Indirect Lighting (HBIL)]{@link https://github.com/Patapom/GodComplex/blob/master/Tests/TestHBIL/2018%20Mayaux%20-%20Horizon-Based%20Indirect%20Lighting%20(HBIL).pdf}
+ * - [Practical Realtime Strategies for Accurate Indirect Occlusion](https://iryoku.com/downloads/Practical-Realtime-Strategies-for-Accurate-Indirect-Occlusion.pdf).
+ * - [Horizon-Based Indirect Lighting (HBIL)](https://github.com/Patapom/GodComplex/blob/master/Tests/TestHBIL/2018%20Mayaux%20-%20Horizon-Based%20Indirect%20Lighting%20(HBIL).pdf)
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/GodRaysShader.js

@@ -22,7 +22,7 @@ import {
  * 6*6*6 = 216 samples.
  *
  * References:
- * - [Sousa2008, Crysis Next Gen Effects, GDC2008]{@link http://www.crytek.com/sites/default/files/GDC08_SousaT_CrysisEffects.ppt}.
+ * - [Sousa2008, Crysis Next Gen Effects, GDC2008](http://www.crytek.com/sites/default/files/GDC08_SousaT_CrysisEffects.ppt).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/KaleidoShader.js

@@ -7,7 +7,7 @@
  * Kaleidoscope Shader.
  * Radial reflection around center point
  * Ported from: {@link http://pixelshaders.com/editor/}
- * by [Toby Schachman]{@link http://tobyschachman.com/}
+ * by [Toby Schachman](http://tobyschachman.com/)
  *
  * sides: number of reflections
  * angle: initial angle in radians

package/examples/jsm/shaders/PoissonDenoiseShader.js

@@ -13,8 +13,8 @@ import {
  * Poisson Denoise Shader.
  *
  * References:
- * - [Self-Supervised Poisson-Gaussian Denoising]{@link https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf}.
- * - [Poisson2Sparse: Self-Supervised Poisson Denoising From a Single Image]{@link https://arxiv.org/pdf/2206.01856.pdf}
+ * - [Self-Supervised Poisson-Gaussian Denoising](https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf).
+ * - [Poisson2Sparse: Self-Supervised Poisson Denoising From a Single Image](https://arxiv.org/pdf/2206.01856.pdf)
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/SSRShader.js

@@ -8,7 +8,7 @@ import {
  * A collection of shaders used for SSR.
  *
  * References:
- * - [3D Game Shaders For Beginners, Screen Space Reflection (SSR)]{@link https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html}.
+ * - [3D Game Shaders For Beginners, Screen Space Reflection (SSR)](https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html).
  *
  * @module SSRShader
  * @three_import import * as SSRShader from 'three/addons/shaders/SSRShader.js';

package/examples/jsm/shaders/SepiaShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Sepia tone shader based on [glfx.js sepia shader]{@link https://github.com/evanw/glfx.js}.
+ * Sepia tone shader based on [glfx.js sepia shader](https://github.com/evanw/glfx.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/SubsurfaceScatteringShader.js

@@ -22,7 +22,7 @@ const meshphong_frag_body = ShaderChunk[ 'meshphong_frag' ].slice( ShaderChunk[
 /**
  * Subsurface Scattering shader.
  *
- * Based on GDC 2011 – [Approximating Translucency for a Fast, Cheap and Convincing Subsurface Scattering Look]{@link https://colinbarrebrisebois.com/2011/03/07/gdc-2011-approximating-translucency-for-a-fast-cheap-and-convincing-subsurface-scattering-look/}
+ * Based on GDC 2011 – [Approximating Translucency for a Fast, Cheap and Convincing Subsurface Scattering Look](https://colinbarrebrisebois.com/2011/03/07/gdc-2011-approximating-translucency-for-a-fast-cheap-and-convincing-subsurface-scattering-look/)
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/TriangleBlurShader.js

@@ -8,7 +8,7 @@ import {
  */
 
 /**
- * Triangle blur shader based on [glfx.js triangle blur shader]{@link https://github.com/evanw/glfx.js}.
+ * Triangle blur shader based on [glfx.js triangle blur shader](https://github.com/evanw/glfx.js).
  *
  * A basic blur filter, which convolves the image with a
  * pyramid filter. The pyramid filter is separable and is applied as two

package/examples/jsm/shaders/UnpackDepthRGBAShader.js

@@ -45,7 +45,7 @@ const UnpackDepthRGBAShader = {
 
 			float depth = unpackRGBAToDepth( texture2D( tDiffuse, vUv ) );
 
-			#ifdef USE_REVERSEDEPTHBUF
+			#ifdef USE_REVERSED_DEPTH_BUFFER
 
 				gl_FragColor = vec4( vec3( depth ), opacity );
 

package/examples/jsm/shaders/VignetteShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Based on [PaintEffect postprocess from ro.me]{@link http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js}.
+ * Based on [PaintEffect postprocess from ro.me](http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/transpiler/GLSLDecoder.js

@@ -11,22 +11,21 @@ const arithmeticOperators = [
 ];
 
 const precedenceOperators = [
-	'/', '*', '%',
-	'-', '+',
-	'<<', '>>',
-	'<', '>', '<=', '>=',
-	'==', '!=',
-	'&',
-	'^',
-	'|',
-	'&&',
-	'^^',
-	'||',
-	'?',
-	'=',
-	'+=', '-=', '*=', '/=', '%=', '^=', '&=', '|=', '<<=', '>>=',
-	','
-].reverse();
+	[ ',' ],
+	[ '=', '+=', '-=', '*=', '/=', '%=', '^=', '&=', '|=', '<<=', '>>=' ],
+	[ '?' ],
+	[ '||' ],
+	[ '^^' ],
+	[ '&&' ],
+	[ '|' ],
+	[ '^' ],
+	[ '&' ],
+	[ '==', '!=' ],
+	[ '<', '>', '<=', '>=' ],
+	[ '<<', '>>' ],
+	[ '+', '-' ],
+	[ '*', '/', '%' ]
+];
 
 const associativityRightToLeft = [
 	'=',
@@ -334,7 +333,7 @@ class GLSLDecoder {
 
 		let groupIndex = 0;
 
-		for ( const operator of precedenceOperators ) {
+		for ( const operators of precedenceOperators ) {
 
 			const parseToken = ( i, inverse = false ) => {
 
@@ -351,7 +350,9 @@ class GLSLDecoder {
 
 				}
 
-				if ( groupIndex === 0 && token.str === operator ) {
+				if ( groupIndex === 0 && operators.includes( token.str ) ) {
+
+					const operator = token.str;
 
 					if ( operator === '?' ) {
 
@@ -396,7 +397,9 @@ class GLSLDecoder {
 
 			};
 
-			if ( associativityRightToLeft.includes( operator ) ) {
+			const isRightAssociative = operators.some( op => associativityRightToLeft.includes( op ) );
+
+			if ( isRightAssociative ) {
 
 				for ( let i = 0; i < tokens.length; i ++ ) {
 

package/examples/jsm/transpiler/TSLEncoder.js

@@ -340,7 +340,7 @@ class TSLEncoder {
 
 			if ( node.hasAssignment ) {
 
-				if ( node.after === false ) {
+				if ( node.after === false && ( node.type === '++' || node.type === '--' ) ) {
 
 					type += 'Before';
 
@@ -665,15 +665,7 @@ ${ this.tab }} )`;
 
 			}
 
-			if ( node.linker.assignments.length > 0 ) {
-
-				varStr += ' = ' + valueStr + '.toVar()';
-
-			} else {
-
-				varStr += ' = ' + valueStr;
-
-			}
+			varStr += ' = ' + valueStr;
 
 		} else {
 
@@ -689,6 +681,12 @@ ${ this.tab }} )`;
 
 		}
 
+		if ( node.needsToVar ) {
+
+			varStr = varStr + '.toVar()';
+
+		}
+
 		return varStr;
 
 	}
@@ -758,6 +756,7 @@ ${ this.tab }} )`;
 			const mutableParam = new VariableDeclaration( param.type, param.name, new Accessor( param.name + '_immutable' ), null, true );
 			mutableParam.parent = param.parent; // link to the original node
 			mutableParam.linker.assignments.push( mutableParam );
+			mutableParam.needsToVar = true; // force var declaration
 
 			node.body.unshift( mutableParam );
 

package/examples/jsm/transpiler/WGSLEncoder.js

@@ -80,6 +80,10 @@ const wgslLib = {
 	'textureLod': 'textureSampleLevel',
 	'texelFetch': 'textureLoad',
 	'textureGrad': 'textureSampleGrad',
+	'floatBitsToInt': 'bitcast<i32>',
+	'floatBitsToUint': 'bitcast<u32>',
+	'intBitsToFloat': 'bitcast<f32>',
+	'uintBitsToFloat': 'bitcast<f32>',
 };
 
 class WGSLEncoder {
@@ -170,6 +174,26 @@ class WGSLEncoder {
 
 				code = `${ modFnName }( ${ snippets.join( ', ' ) } )`;
 
+			} else if ( fnName.startsWith( 'bitcast' ) ) {
+
+				const params = node.params.map( p => this.emitExpression( p ) ).join( ',' );
+				const types = node.params.map( p => p.getType() );
+
+				if ( /.*vec[234]/.test( types[ 0 ] ) ) {
+
+					const conversionType = fnName.substring( 8, fnName.length - 1 );
+					const vectorType = types[ 0 ].substring( - 1 );
+
+					code = `bitcast<${ vectorType }<${ conversionType }>>`;
+
+				} else {
+
+					code = fnName;
+
+				}
+
+				code += `( ${ params } )`;
+
 			} else if ( fnName.startsWith( 'texture' ) ) {
 
 				// Handle texture functions separately due to sampler handling