diff --git a/examples/files.json b/examples/files.json index d88d5ad39c2626..ca5dc08cf753b7 100644 --- a/examples/files.json +++ b/examples/files.json @@ -329,6 +329,7 @@ "webgpu_depth_texture", "webgpu_display_stereo", "webgpu_equirectangular", + "webgpu_hdr", "webgpu_instance_mesh", "webgpu_instance_path", "webgpu_instance_points", diff --git a/examples/jsm/tsl/display/AfterImageNode.js b/examples/jsm/tsl/display/AfterImageNode.js index 2d4c9e91ce5eb6..daf15ed6710810 100644 --- a/examples/jsm/tsl/display/AfterImageNode.js +++ b/examples/jsm/tsl/display/AfterImageNode.js @@ -1,5 +1,5 @@ import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode, NodeUpdateType } from 'three/webgpu'; -import { nodeObject, Fn, float, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl'; +import { nodeObject, Fn, float, uv, texture, passTexture, sign, max, convertToTexture } from 'three/tsl'; const _size = /*@__PURE__*/ new Vector2(); const _quadMeshComp = /*@__PURE__*/ new QuadMesh(); @@ -24,9 +24,9 @@ class AfterImageNode extends TempNode { * Constructs a new after image node. * * @param {TextureNode} textureNode - The texture node that represents the input of the effect. - * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect. + * @param {Node} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect. */ - constructor( textureNode, damp = 0.96 ) { + constructor( textureNode, damp = float( 0.96 ) ) { super( 'vec4' ); @@ -49,9 +49,9 @@ class AfterImageNode extends TempNode { * persists longer, while a lower value means it fades faster. Should be in * the range `[0, 1]`. * - * @type {UniformNode} + * @type {Node} */ - this.damp = uniform( damp ); + this.damp = damp; /** * The render target used for compositing the effect. @@ -234,9 +234,9 @@ class AfterImageNode extends TempNode { * @tsl * @function * @param {Node} node - The node that represents the input of the effect. - * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect. + * @param {(Node|number)} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect. * @returns {AfterImageNode} */ -export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), damp ) ); +export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), nodeObject( damp ) ) ); export default AfterImageNode; diff --git a/examples/screenshots/webgpu_hdr.jpg b/examples/screenshots/webgpu_hdr.jpg new file mode 100644 index 00000000000000..d91c7c48b3b8ef Binary files /dev/null and b/examples/screenshots/webgpu_hdr.jpg differ diff --git a/examples/webgpu_hdr.html b/examples/webgpu_hdr.html new file mode 100644 index 00000000000000..46c91ef6b1189e --- /dev/null +++ b/examples/webgpu_hdr.html @@ -0,0 +1,196 @@ + + + + + + three.js webgpu - HDR Draw + + + + + +
+ threejs - HDR Draw +
+ + + + + + + diff --git a/examples/webgpu_postprocessing_afterimage.html b/examples/webgpu_postprocessing_afterimage.html index e55c579d0eeb70..ac00d8e137e6e0 100644 --- a/examples/webgpu_postprocessing_afterimage.html +++ b/examples/webgpu_postprocessing_afterimage.html @@ -27,7 +27,7 @@