chore: updates

Author: triniwiz

napi/canvas-napi/examples/assets/cubemap/credit.txt

@@ -0,0 +1 @@
+Cubemap image available under a Creative Commons Attribution 3.0 Unported License at https://www.humus.name/index.php?page=Textures&ID=58

napi/canvas-napi/examples/assets/cubemap/negx.jpg

@@ -0,0 +1,20 @@
+Author
+======
+
+This is the work of Emil Persson, aka Humus.
+http://www.humus.name
+[email protected]
+
+
+
+Legal stuff
+===========
+
+This work is free and may be used by anyone for any purpose
+and may be distributed freely to anyone using any distribution
+media or distribution method as long as this file is included.
+Distribution without this file is allowed if it's distributed
+with free non-commercial software; however, fair credit of the
+original author is expected.
+Any commercial distribution of this software requires the written
+approval of Emil Persson.

napi/canvas-napi/examples/assets/cubemap/negy.jpg

@@ -0,0 +1,245 @@
+import '@nativescript/macos-node-api';
+import { createRequire } from 'node:module';
+import utils from '../../utils';
+
+//@ts-ignore
+const require = createRequire(import.meta.url);
+
+const { requestAnimationFrame } = utils;
+
+import helpers from '../helpers';
+
+const { readTextSync } = helpers;
+
+const { Canvas, GPUBufferUsage, GPUCanvasContext, GPUDevice, GPUTexture, GPUTextureUsage, ImageAsset } = require('../../canvas-napi.darwin-arm64.node');
+
+import { mat4, vec3 } from 'wgpu-matrix';
+
+import { cubeVertexArray, cubeVertexSize, cubeUVOffset, cubePositionOffset, cubeVertexCount } from '../meshes/cube';
+
+export async function run(canvas) {
+	const adapter = await navigator.gpu?.requestAdapter();
+	const device = (await adapter?.requestDevice()) as never;
+
+	const devicePixelRatio = window.devicePixelRatio;
+
+	canvas.width = canvas.clientWidth * devicePixelRatio;
+	canvas.height = canvas.clientHeight * devicePixelRatio;
+
+	const context = canvas.getContext('webgpu');
+
+	const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+	const basicVertWGSL = readTextSync('./shaders/basic.vert.wgsl');
+	const sampleCubemapWGSL = readTextSync('./shaders/sampleCubemap.frag.wgsl');
+
+	context.configure({
+		device,
+		format: presentationFormat,
+		presentMode: 'fifo',
+	});
+
+	// Create a vertex buffer from the cube data.
+	const verticesBuffer = device.createBuffer({
+		size: cubeVertexArray.byteLength,
+		usage: GPUBufferUsage.VERTEX,
+		mappedAtCreation: true,
+	});
+
+	new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray);
+	verticesBuffer.unmap();
+
+	const pipeline = device.createRenderPipeline({
+		layout: 'auto',
+		vertex: {
+			module: device.createShaderModule({
+				code: basicVertWGSL,
+			}),
+			buffers: [
+				{
+					arrayStride: cubeVertexSize,
+					attributes: [
+						{
+							// position
+							shaderLocation: 0,
+							offset: cubePositionOffset,
+							format: 'float32x4',
+						},
+						{
+							// uv
+							shaderLocation: 1,
+							offset: cubeUVOffset,
+							format: 'float32x2',
+						},
+					],
+				},
+			],
+			entryPoint: 'main',
+		},
+		fragment: {
+			module: device.createShaderModule({
+				code: sampleCubemapWGSL,
+			}),
+			targets: [
+				{
+					format: presentationFormat,
+				},
+			],
+			entryPoint: 'main',
+		},
+		primitive: {
+			topology: 'triangle-list',
+
+			// Since we are seeing from inside of the cube
+			// and we are using the regular cube geomtry data with outward-facing normals,
+			// the cullMode should be 'front' or 'none'.
+			cullMode: 'none',
+		},
+
+		// Enable depth testing so that the fragment closest to the camera
+		// is rendered in front.
+		depthStencil: {
+			depthWriteEnabled: true,
+			depthCompare: 'less',
+			format: 'depth24plus',
+		},
+	});
+
+	const depthTexture = device.createTexture({
+		size: [canvas.width as number, canvas.height as number],
+		format: 'depth24plus',
+		usage: GPUTextureUsage.RENDER_ATTACHMENT,
+	});
+
+	// Fetch the 6 separate images for negative/positive x, y, z axis of a cubemap
+	// and upload it into a GPUTexture.
+	let cubemapTexture: GPUTexture;
+	let imageBitmaps;
+	{
+		// The order of the array layers is [+X, -X, +Y, -Y, +Z, -Z]
+		const imgSrcs = ['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'];
+		const promises = imgSrcs.map(async (src) => {
+			// const response = await fetch(src);
+			// return createImageBitmap(await response.blob());
+			const asset = new ImageAsset();
+			await asset.fromFile(import.meta.resolve('../assets/cubemap/' + src).replace('file://', ''));
+			return asset;
+		});
+		imageBitmaps = await Promise.all(promises);
+
+		cubemapTexture = device.createTexture({
+			dimension: '2d',
+			// Create a 2d array texture.
+			// Assume each image has the same size.
+			size: [imageBitmaps[0].width, imageBitmaps[0].height, 6],
+			format: 'rgba8unorm',
+			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+		});
+
+		for (let i = 0; i < imageBitmaps.length; i++) {
+			const imageBitmap = imageBitmaps[i];
+			device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture: cubemapTexture, origin: [0, 0, i] }, [imageBitmap.width, imageBitmap.height]);
+		}
+	}
+
+	const uniformBufferSize = 4 * 16; // 4x4 matrix
+	const uniformBuffer = device.createBuffer({
+		size: uniformBufferSize,
+		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+	});
+
+	const sampler = device.createSampler({
+		magFilter: 'linear',
+		minFilter: 'linear',
+	});
+
+	const uniformBindGroup = device.createBindGroup({
+		layout: pipeline.getBindGroupLayout(0),
+		entries: [
+			{
+				binding: 0,
+				resource: {
+					buffer: uniformBuffer,
+					offset: 0,
+					size: uniformBufferSize,
+				},
+			},
+			{
+				binding: 1,
+				resource: sampler,
+			},
+			{
+				binding: 2,
+				resource: cubemapTexture.createView({
+					dimension: 'cube',
+				}),
+			},
+		],
+	});
+
+	const renderPassDescriptor = {
+		colorAttachments: [
+			{
+				view: undefined, // Assigned later
+				loadOp: 'clear',
+				storeOp: 'store',
+			},
+		],
+		depthStencilAttachment: {
+			view: depthTexture.createView(),
+
+			depthClearValue: 1.0,
+			depthLoadOp: 'clear',
+			depthStoreOp: 'store',
+		},
+	};
+
+	const aspect = (canvas.width as number) / (canvas.height as number);
+	const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 3000);
+
+	const modelMatrix = mat4.scaling(vec3.fromValues(1000, 1000, 1000));
+	const modelViewProjectionMatrix = mat4.create();
+	const viewMatrix = mat4.identity();
+
+	const tmpMat4 = mat4.create();
+
+	// Comppute camera movement:
+	// It rotates around Y axis with a slight pitch movement.
+	function updateTransformationMatrix() {
+		const now = Date.now() / 800;
+
+		mat4.rotate(viewMatrix, vec3.fromValues(1, 0, 0), (Math.PI / 10) * Math.sin(now), tmpMat4);
+		mat4.rotate(tmpMat4, vec3.fromValues(0, 1, 0), now * 0.2, tmpMat4);
+
+		mat4.multiply(tmpMat4, modelMatrix, modelViewProjectionMatrix);
+		mat4.multiply(projectionMatrix, modelViewProjectionMatrix, modelViewProjectionMatrix);
+	}
+
+	function frame() {
+		const texture = context.getCurrentTexture();
+
+		if (!texture) {
+			requestAnimationFrame(frame);
+			return;
+		}
+
+		updateTransformationMatrix();
+		device.queue.writeBuffer(uniformBuffer, 0, modelViewProjectionMatrix.buffer, modelViewProjectionMatrix.byteOffset, modelViewProjectionMatrix.byteLength);
+
+		renderPassDescriptor.colorAttachments[0].view = texture.createView();
+
+		const commandEncoder = device.createCommandEncoder();
+		const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor as never);
+		passEncoder.setPipeline(pipeline);
+		passEncoder.setVertexBuffer(0, verticesBuffer);
+		passEncoder.setBindGroup(0, uniformBindGroup);
+		passEncoder.draw(cubeVertexCount);
+		passEncoder.end();
+		device.queue.submit([commandEncoder.finish()]);
+
+		context.presentSurface();
+
+		requestAnimationFrame(frame);
+	}
+	requestAnimationFrame(frame);
+}

napi/canvas-napi/examples/assets/cubemap/negz.jpg

@@ -5,12 +5,15 @@ import '@nativescript/foundation/dom/index.js';
 import '../app.ts';
 import '../../canvas';
 import installPolyfills from '../../polyfill';
+import three from './three';
+const { webgpuCube } = three;
 
 // import { run as texturedCube } from './texturedCube';
 // import { run as twoCubes } from './twoCubes.ts';
-//import { run as computeBoids } from './gpgpu/computeBoids';
+// import { run as computeBoids } from './gpgpu/computeBoids';
 // import { run as wireframe } from './graphicsTechniques/wireframe';
 import { run as renderBundles } from './renderBundles';
+import { run as cubeMap } from './cubeMap';
 // @ts-ignore
 const require = createRequire(import.meta.url);
 
@@ -1527,11 +1530,13 @@ canvas.addEventListener('ready', (event) => {
 	// webgpuTriangle(canvas);
 	// doGL()
 	// swarm(canvas);
-//	texturedCube(canvas);
-	//twoCubes(canvas);
-//	computeBoids(canvas);
-	//wireframe(canvas);
+	//texturedCube(canvas);
+// 	twoCubes(canvas);
+	// computeBoids(canvas);
+// 	wireframe(canvas);
 	renderBundles(canvas);
+	//webgpuCube(canvas);
+	//cubeMap(canvas);
 });
 
 canvas.width = NSScreen.mainScreen.frame.size.width;
@@ -1541,6 +1546,9 @@ window.setAttribute('styleMask', (
 	NSWindowStyleMask.Titled | NSWindowStyleMask.Closable | NSWindowStyleMask.Miniaturizable | NSWindowStyleMask.Resizable | NSWindowStyleMask.FullSizeContentView
 ) as never);
 
+const color = NSColor.colorWithCalibratedHueSaturationBrightnessAlpha(0,0,0.2, 0.5);
+const background = `rgba(${color.redComponent * 255}, ${color.greenComponent * 255}, ${color.blueComponent * 255}, ${color.alphaComponent})`;
+window.style.backgroundColor = background;
 window.appendChild(canvas);
 
 document.body.appendChild(window);

napi/canvas-napi/examples/assets/cubemap/posx.jpg

@@ -10,7 +10,8 @@
 	"private": true,
 	"dependencies": {
 		"teapot": "~1.0.0",
-		"wgpu-matrix": "~3.3.0"
+		"wgpu-matrix": "~3.3.0",
+		"three": "~0.171.0"
 	},
 	"devDependencies": {
 		"tsx": "^4.19.2"

napi/canvas-napi/examples/assets/cubemap/posy.jpg

@@ -0,0 +1,59 @@
+let isAvailable = typeof navigator !== 'undefined' && navigator.gpu !== undefined;
+console.log('isAvailable', isAvailable);
+
+import * as THREE from 'three/webgpu';
+async function webgpuCube(canvas) {
+	// const adapter = await navigator.gpu?.requestAdapter();
+	// const device: GPUDevice = (await adapter?.requestDevice()) as never;
+
+	var camera, scene, renderer;
+	var geometry, material, mesh;
+	var context;
+
+	function animate() {
+		mesh.rotation.x += 0.01;
+		mesh.rotation.y += 0.02;
+
+		renderer.render(scene, camera);
+
+		console.log('animate');
+
+		context.presentSurface();
+	}
+
+	async function init() {
+		canvas.width = canvas.clientWidth * window.devicePixelRatio;
+		canvas.height = canvas.clientHeight * window.devicePixelRatio;
+
+		const innerWidth = canvas.clientWidth;
+		const innerHeight = canvas.clientHeight;
+
+		camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 10);
+		camera.position.z = 1;
+
+		scene = new THREE.Scene();
+
+		geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
+		material = new THREE.MeshNormalMaterial();
+
+		mesh = new THREE.Mesh(geometry, material);
+		scene.add(mesh);
+
+		renderer = new THREE.WebGPURenderer({ canvas });
+
+		await renderer.init();
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+
+		console.log(canvas.getContext('webgpu'), canvas.getContext('webgl'), canvas.getContext('webgl2'));
+
+		context = canvas.getContext('webgpu');
+		renderer.setAnimationLoop(animate);
+	}
+
+	init();
+}
+
+export default {
+	webgpuCube,
+};