super-three 0.136.1 → 0.144.0

package/examples/jsm/renderers/webgpu/WebGPURenderStates.js

@@ -0,0 +1,66 @@
+import { LightsNode } from 'three/nodes';
+
+class WebGPURenderState {
+
+	constructor() {
+
+		this.lightsNode = new LightsNode();
+
+		this.lightsArray = [];
+
+	}
+
+	init() {
+
+		this.lightsArray.length = 0;
+
+	}
+
+	pushLight( light ) {
+
+		this.lightsArray.push( light );
+
+	}
+
+	getLightsNode() {
+
+		return this.lightsNode.fromLights( this.lightsArray );
+
+	}
+
+}
+
+class WebGPURenderStates {
+
+	constructor() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+	get( scene, /* camera */ ) {
+
+		const renderStates = this.renderStates;
+
+		let renderState = renderStates.get( scene );
+
+		if ( renderState === undefined ) {
+
+			renderState = new WebGPURenderState();
+			renderStates.set( scene, renderState );
+
+		}
+
+		return renderState;
+
+	}
+
+	dispose() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+}
+
+export default WebGPURenderStates;

package/examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -8,9 +8,11 @@ import WebGPURenderPipelines from './WebGPURenderPipelines.js';
 import WebGPUComputePipelines from './WebGPUComputePipelines.js';
 import WebGPUBindings from './WebGPUBindings.js';
 import WebGPURenderLists from './WebGPURenderLists.js';
+import WebGPURenderStates from './WebGPURenderStates.js';
 import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
+import WebGPUUtils from './WebGPUUtils.js';
 
 import { Frustum, Matrix4, Vector3, Color, LinearEncoding } from 'three';
 
@@ -47,15 +49,34 @@ Matrix4.prototype.makeOrthographic = function ( left, right, top, bottom, near,
 	const y = ( top + bottom ) * h;
 	const z = near * p;
 
-	te[ 0 ] = 2 * w;	te[ 4 ] = 0;	te[ 8 ] = 0;	te[ 12 ] = - x;
-	te[ 1 ] = 0;	te[ 5 ] = 2 * h;	te[ 9 ] = 0;	te[ 13 ] = - y;
-	te[ 2 ] = 0;	te[ 6 ] = 0;	te[ 10 ] = - 1 * p;	te[ 14 ] = - z;
-	te[ 3 ] = 0;	te[ 7 ] = 0;	te[ 11 ] = 0;	te[ 15 ] = 1;
+	te[ 0 ] = 2 * w;	te[ 4 ] = 0;		te[ 8 ] = 0;		te[ 12 ] = - x;
+	te[ 1 ] = 0;		te[ 5 ] = 2 * h;	te[ 9 ] = 0;		te[ 13 ] = - y;
+	te[ 2 ] = 0;		te[ 6 ] = 0;		te[ 10 ] = - 1 * p;	te[ 14 ] = - z;
+	te[ 3 ] = 0;		te[ 7 ] = 0;		te[ 11 ] = 0;		te[ 15 ] = 1;
 
 	return this;
 
 };
 
+Frustum.prototype.setFromProjectionMatrix = function ( m ) {
+
+	const planes = this.planes;
+	const me = m.elements;
+	const me0 = me[ 0 ], me1 = me[ 1 ], me2 = me[ 2 ], me3 = me[ 3 ];
+	const me4 = me[ 4 ], me5 = me[ 5 ], me6 = me[ 6 ], me7 = me[ 7 ];
+	const me8 = me[ 8 ], me9 = me[ 9 ], me10 = me[ 10 ], me11 = me[ 11 ];
+	const me12 = me[ 12 ], me13 = me[ 13 ], me14 = me[ 14 ], me15 = me[ 15 ];
+
+	planes[ 0 ].setComponents( me3 - me0, me7 - me4, me11 - me8, me15 - me12 ).normalize();
+	planes[ 1 ].setComponents( me3 + me0, me7 + me4, me11 + me8, me15 + me12 ).normalize();
+	planes[ 2 ].setComponents( me3 + me1, me7 + me5, me11 + me9, me15 + me13 ).normalize();
+	planes[ 3 ].setComponents( me3 - me1, me7 - me5, me11 - me9, me15 - me13 ).normalize();
+	planes[ 4 ].setComponents( me3 - me2, me7 - me6, me11 - me10, me15 - me14 ).normalize();
+	planes[ 5 ].setComponents( me2, me6, me10, me14 ).normalize();
+
+	return this;
+
+};
 
 const _frustum = new Frustum();
 const _projScreenMatrix = new Matrix4();
@@ -65,6 +86,8 @@ class WebGPURenderer {
 
 	constructor( parameters = {} ) {
 
+		this.isWebGPURenderer = true;
+
 		// public
 
 		this.domElement = ( parameters.canvas !== undefined ) ? parameters.canvas : this._createCanvasElement();
@@ -105,11 +128,14 @@ class WebGPURenderer {
 		this._renderPipelines = null;
 		this._computePipelines = null;
 		this._renderLists = null;
+		this._renderStates = null;
 		this._textures = null;
 		this._background = null;
 
 		this._renderPassDescriptor = null;
 
+		this._currentRenderState = null;
+
 		this._currentRenderList = null;
 		this._opaqueSort = null;
 		this._transparentSort = null;
@@ -167,7 +193,8 @@ class WebGPURenderer {
 
 		context.configure( {
 			device: device,
-			format: GPUTextureFormat.BGRA8Unorm // this is the only valid context format right now (r121)
+			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
+			alphaMode: 'premultiplied'
 		} );
 
 		this._adapter = adapter;
@@ -180,11 +207,13 @@ class WebGPURenderer {
 		this._geometries = new WebGPUGeometries( this._attributes, this._info );
 		this._textures = new WebGPUTextures( device, this._properties, this._info );
 		this._objects = new WebGPUObjects( this._geometries, this._info );
-		this._nodes = new WebGPUNodes( this );
-		this._computePipelines = new WebGPUComputePipelines( device );
-		this._renderPipelines = new WebGPURenderPipelines( this, device, parameters.sampleCount, this._nodes );
+		this._utils = new WebGPUUtils( this );
+		this._nodes = new WebGPUNodes( this, this._properties );
+		this._computePipelines = new WebGPUComputePipelines( device, this._nodes );
+		this._renderPipelines = new WebGPURenderPipelines( device, this._nodes, this._utils );
 		this._bindings = this._renderPipelines.bindings = new WebGPUBindings( device, this._info, this._properties, this._textures, this._renderPipelines, this._computePipelines, this._attributes, this._nodes );
 		this._renderLists = new WebGPURenderLists();
+		this._renderStates = new WebGPURenderStates();
 		this._background = new WebGPUBackground( this );
 
 		//
@@ -193,7 +222,7 @@ class WebGPURenderer {
 			colorAttachments: [ {
 				view: null
 			} ],
-			 depthStencilAttachment: {
+			depthStencilAttachment: {
 				view: null,
 				depthStoreOp: GPUStoreOp.Store,
 				stencilStoreOp: GPUStoreOp.Store
@@ -213,9 +242,9 @@ class WebGPURenderer {
 
 		//
 
-		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
+		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
-		if ( camera.parent === null ) camera.updateMatrixWorld();
+		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
 		if ( this._info.autoReset === true ) this._info.reset();
 
@@ -225,6 +254,9 @@ class WebGPURenderer {
 		this._currentRenderList = this._renderLists.get( scene, camera );
 		this._currentRenderList.init();
 
+		this._currentRenderState = this._renderStates.get( scene );
+		this._currentRenderState.init();
+
 		this._projectObject( scene, camera, 0 );
 
 		this._currentRenderList.finish();
@@ -271,7 +303,7 @@ class WebGPURenderer {
 
 		//
 
-		this._background.update( scene );
+		this._background.update( this._currentRenderList, scene );
 
 		// start render pass
 
@@ -303,17 +335,21 @@ class WebGPURenderer {
 
 		}
 
+		// lights node
+
+		const lightsNode = this._currentRenderState.getLightsNode();
+
 		// process render lists
 
 		const opaqueObjects = this._currentRenderList.opaque;
 		const transparentObjects = this._currentRenderList.transparent;
 
-		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, passEncoder );
-		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, passEncoder );
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, scene, lightsNode, passEncoder );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, scene, lightsNode, passEncoder );
 
 		// finish render pass
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}
@@ -467,55 +503,6 @@ class WebGPURenderer {
 
 	}
 
-	getCurrentEncoding() {
-
-		const renderTarget = this.getRenderTarget();
-		return ( renderTarget !== null ) ? renderTarget.texture.encoding : this.outputEncoding;
-
-	}
-
-	getCurrentColorFormat() {
-
-		let format;
-
-		const renderTarget = this.getRenderTarget();
-
-		if ( renderTarget !== null ) {
-
-			const renderTargetProperties = this._properties.get( renderTarget );
-			format = renderTargetProperties.colorTextureFormat;
-
-		} else {
-
-			format = GPUTextureFormat.BGRA8Unorm; // default context format
-
-		}
-
-		return format;
-
-	}
-
-	getCurrentDepthStencilFormat() {
-
-		let format;
-
-		const renderTarget = this.getRenderTarget();
-
-		if ( renderTarget !== null ) {
-
-			const renderTargetProperties = this._properties.get( renderTarget );
-			format = renderTargetProperties.depthTextureFormat;
-
-		} else {
-
-			format = GPUTextureFormat.Depth24PlusStencil8;
-
-		}
-
-		return format;
-
-	}
-
 	getClearColor( target ) {
 
 		return target.copy( this._clearColor );
@@ -581,6 +568,7 @@ class WebGPURenderer {
 		this._bindings.dispose();
 		this._info.dispose();
 		this._renderLists.dispose();
+		this._renderStates.dispose();
 		this._textures.dispose();
 
 	}
@@ -597,30 +585,44 @@ class WebGPURenderer {
 
 	}
 
-	compute( computeParams ) {
+	compute( ...computeNodes ) {
 
 		const device = this._device;
+		const computePipelines = this._computePipelines;
+
 		const cmdEncoder = device.createCommandEncoder( {} );
 		const passEncoder = cmdEncoder.beginComputePass();
 
-		for ( const param of computeParams ) {
+		for ( const computeNode of computeNodes ) {
+
+			// onInit
+
+			if ( computePipelines.has( computeNode ) === false ) {
+
+				computeNode.onInit( { renderer: this } );
+
+			}
 
 			// pipeline
 
-			const pipeline = this._computePipelines.get( param );
+			const pipeline = computePipelines.get( computeNode );
 			passEncoder.setPipeline( pipeline );
 
+			// node
+
+			//this._nodes.update( computeNode );
+
 			// bind group
 
-			const bindGroup = this._bindings.getForCompute( param ).group;
-			this._bindings.update( param );
+			const bindGroup = this._bindings.get( computeNode ).group;
+			this._bindings.update( computeNode );
 			passEncoder.setBindGroup( 0, bindGroup );
 
-			passEncoder.dispatch( param.num );
+			passEncoder.dispatchWorkgroups( computeNode.dispatchCount );
 
 		}
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}
@@ -634,6 +636,7 @@ class WebGPURenderer {
 	_projectObject( object, camera, groupOrder ) {
 
 		const currentRenderList = this._currentRenderList;
+		const currentRenderState = this._currentRenderState;
 
 		if ( object.visible === false ) return;
 
@@ -651,7 +654,7 @@ class WebGPURenderer {
 
 			} else if ( object.isLight ) {
 
-				//currentRenderState.pushLight( object );
+				currentRenderState.pushLight( object );
 
 				if ( object.castShadow ) {
 
@@ -736,7 +739,7 @@ class WebGPURenderer {
 
 	}
 
-	_renderObjects( renderList, camera, passEncoder ) {
+	_renderObjects( renderList, camera, scene, lightsNode, passEncoder ) {
 
 		// process renderable objects
 
@@ -747,12 +750,7 @@ class WebGPURenderer {
 			// @TODO: Add support for multiple materials per object. This will require to extract
 			// the material from the renderItem object and pass it with its group data to _renderObject().
 
-			const object = renderItem.object;
-
-			object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-			object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
-
-			this._objects.update( object );
+			const { object, geometry, material, group } = renderItem;
 
 			if ( camera.isArrayCamera ) {
 
@@ -770,9 +768,7 @@ class WebGPURenderer {
 
 						passEncoder.setViewport( vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth );
 
-						this._nodes.update( object, camera2 );
-						this._bindings.update( object );
-						this._renderObject( object, passEncoder );
+						this._renderObject( object, scene, camera2, geometry, material, group, lightsNode, passEncoder );
 
 					}
 
@@ -780,9 +776,7 @@ class WebGPURenderer {
 
 			} else {
 
-				this._nodes.update( object, camera );
-				this._bindings.update( object );
-				this._renderObject( object, passEncoder );
+				this._renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder );
 
 			}
 
@@ -790,10 +784,30 @@ class WebGPURenderer {
 
 	}
 
-	_renderObject( object, passEncoder ) {
+	_renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder ) {
 
 		const info = this._info;
 
+		// send scene properties to object
+
+		const objectProperties = this._properties.get( object );
+
+		objectProperties.lightsNode = lightsNode;
+		objectProperties.scene = scene;
+
+		//
+
+		object.onBeforeRender( this, scene, camera, geometry, material, group );
+
+		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
+		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
+
+		// updates
+
+		this._nodes.update( object, camera );
+		this._bindings.update( object );
+		this._objects.update( object );
+
 		// pipeline
 
 		const renderPipeline = this._renderPipelines.get( object );
@@ -806,7 +820,6 @@ class WebGPURenderer {
 
 		// index
 
-		const geometry = object.geometry;
 		const index = geometry.index;
 
 		const hasIndex = ( index !== null );
@@ -825,7 +838,8 @@ class WebGPURenderer {
 
 		const drawRange = geometry.drawRange;
 		const firstVertex = drawRange.start;
-		const instanceCount = ( geometry.isInstancedBufferGeometry ) ? geometry.instanceCount : 1;
+
+		const instanceCount = geometry.isInstancedBufferGeometry ? geometry.instanceCount : ( object.isInstancedMesh ? object.count : 1 );
 
 		if ( hasIndex === true ) {
 
@@ -935,11 +949,7 @@ class WebGPURenderer {
 				device: device,
 				format: GPUTextureFormat.BGRA8Unorm,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT,
-				size: {
-					width: Math.floor( this._width * this._pixelRatio ),
-					height: Math.floor( this._height * this._pixelRatio ),
-					depthOrArrayLayers: 1
-				},
+				alphaMode: 'premultiplied'
 			} );
 
 		}
@@ -956,6 +966,4 @@ class WebGPURenderer {
 
 }
 
-WebGPURenderer.prototype.isWebGPURenderer = true;
-
 export default WebGPURenderer;

package/examples/jsm/renderers/webgpu/WebGPUSampledTexture.js

@@ -7,6 +7,8 @@ class WebGPUSampledTexture extends WebGPUBinding {
 
 		super( name );
 
+		this.isSampledTexture = true;
+
 		this.texture = texture;
 
 		this.dimension = GPUTextureViewDimension.TwoD;
@@ -26,13 +28,13 @@ class WebGPUSampledTexture extends WebGPUBinding {
 
 }
 
-WebGPUSampledTexture.prototype.isSampledTexture = true;
-
 class WebGPUSampledArrayTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
 
-		super( name );
+		super( name, texture );
+
+		this.isSampledArrayTexture = true;
 
 		this.dimension = GPUTextureViewDimension.TwoDArray;
 
@@ -40,13 +42,13 @@ class WebGPUSampledArrayTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampledArrayTexture.prototype.isSampledArrayTexture = true;
-
 class WebGPUSampled3DTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
+
+		super( name, texture );
 
-		super( name );
+		this.isSampled3DTexture = true;
 
 		this.dimension = GPUTextureViewDimension.ThreeD;
 
@@ -54,13 +56,13 @@ class WebGPUSampled3DTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampled3DTexture.prototype.isSampled3DTexture = true;
-
 class WebGPUSampledCubeTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
 
-		super( name );
+		super( name, texture );
+
+		this.isSampledCubeTexture = true;
 
 		this.dimension = GPUTextureViewDimension.Cube;
 
@@ -68,6 +70,4 @@ class WebGPUSampledCubeTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampledCubeTexture.prototype.isSampledCubeTexture = true;
-
 export { WebGPUSampledTexture, WebGPUSampledArrayTexture, WebGPUSampled3DTexture, WebGPUSampledCubeTexture };

package/examples/jsm/renderers/webgpu/WebGPUSampler.js

@@ -7,6 +7,8 @@ class WebGPUSampler extends WebGPUBinding {
 
 		super( name );
 
+		this.isSampler = true;
+
 		this.texture = texture;
 
 		this.type = GPUBindingType.Sampler;
@@ -24,6 +26,4 @@ class WebGPUSampler extends WebGPUBinding {
 
 }
 
-WebGPUSampler.prototype.isSampler = true;
-
 export default WebGPUSampler;

package/examples/jsm/renderers/webgpu/WebGPUStorageBuffer.js

@@ -1,23 +1,20 @@
-import WebGPUBinding from './WebGPUBinding.js';
+import WebGPUBuffer from './WebGPUBuffer.js';
 import { GPUBindingType } from './constants.js';
 
-class WebGPUStorageBuffer extends WebGPUBinding {
+class WebGPUStorageBuffer extends WebGPUBuffer {
 
 	constructor( name, attribute ) {
 
-		super( name );
+		super( name, GPUBindingType.StorageBuffer, attribute.array );
 
-		this.type = GPUBindingType.StorageBuffer;
+		this.isStorageBuffer = true;
 
-		this.usage = GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST;
+		this.usage |= GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE;
 
 		this.attribute = attribute;
-		this.bufferGPU = null; // set by the renderer
 
 	}
 
 }
 
-WebGPUStorageBuffer.prototype.isStorageBuffer = true;
-
 export default WebGPUStorageBuffer;

package/examples/jsm/renderers/webgpu/WebGPUTextureUtils.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants.js';
+import { GPUTextureViewDimension, GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
 
 // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
 
@@ -30,16 +30,14 @@ class WebGPUTextureUtils {
 
 		const mipmapVertexSource = `
 struct VarysStruct {
-
-	[[ builtin( position ) ]] Position: vec4<f32>;
-	[[ location( 0 ) ]] vTex : vec2<f32>;
-
+	@builtin( position ) Position: vec4<f32>,
+	@location( 0 ) vTex : vec2<f32>
 };
 
-[[ stage( vertex ) ]]
-fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
+@vertex
+fn main( @builtin( vertex_index ) vertexIndex : u32 ) -> VarysStruct {
 
-	var Varys: VarysStruct;
+	var Varys : VarysStruct;
 
 	var pos = array< vec2<f32>, 4 >(
 		vec2<f32>( -1.0,  1.0 ),
@@ -64,14 +62,14 @@ fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
 `;
 
 		const mipmapFragmentSource = `
-[[ group( 0 ), binding( 0 ) ]] 
+@group( 0 ) @binding( 0 )
 var imgSampler : sampler;
 
-[[ group( 0 ), binding( 1 ) ]] 
+@group( 0 ) @binding( 1 )
 var img : texture_2d<f32>;
 
-[[ stage( fragment ) ]]
-fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32> {
+@fragment
+fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 
 	return textureSample( img, imgSampler, vTex );
 
@@ -102,17 +100,18 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 			pipeline = this.device.createRenderPipeline( {
 				vertex: {
 					module: this.mipmapVertexShaderModule,
-					entryPoint: 'main',
+					entryPoint: 'main'
 				},
 				fragment: {
 					module: this.mipmapFragmentShaderModule,
 					entryPoint: 'main',
-					targets: [ { format } ],
+					targets: [ { format } ]
 				},
 				primitive: {
 					topology: GPUPrimitiveTopology.TriangleStrip,
 					stripIndexFormat: GPUIndexFormat.Uint32
-				}
+				},
+				layout: 'auto'
 			} );
 
 			this.pipelines[ format ] = pipeline;
@@ -123,7 +122,7 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 
 	}
 
-	generateMipmaps( textureGPU, textureGPUDescriptor ) {
+	generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer = 0 ) {
 
 		const pipeline = this.getMipmapPipeline( textureGPUDescriptor.format );
 
@@ -132,20 +131,26 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 
 		let srcView = textureGPU.createView( {
 			baseMipLevel: 0,
-			mipLevelCount: 1
+			mipLevelCount: 1,
+			dimension: GPUTextureViewDimension.TwoD,
+			baseArrayLayer
 		} );
 
 		for ( let i = 1; i < textureGPUDescriptor.mipLevelCount; i ++ ) {
 
 			const dstView = textureGPU.createView( {
 				baseMipLevel: i,
-				mipLevelCount: 1
+				mipLevelCount: 1,
+				dimension: GPUTextureViewDimension.TwoD,
+				baseArrayLayer
 			} );
 
 			const passEncoder = commandEncoder.beginRenderPass( {
 				colorAttachments: [ {
 					view: dstView,
-					loadValue: [ 0, 0, 0, 0 ]
+					loadOp: GPULoadOp.Clear,
+					storeOp: GPUStoreOp.Store,
+					clearValue: [ 0, 0, 0, 0 ]
 				} ]
 			} );
 
@@ -163,7 +168,7 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 			passEncoder.setPipeline( pipeline );
 			passEncoder.setBindGroup( 0, bindGroup );
 			passEncoder.draw( 4, 1, 0, 0 );
-			passEncoder.endPass();
+			passEncoder.end();
 
 			srcView = dstView;