fix: android default limits

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-babylon",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-media/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-media",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Canvas media",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-phaser-ce/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-phaser-ce",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Tools for using Phaser-ce to build native 2D games in NativeScript 👾",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-phaser/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-phaser",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Build awesome 2D games with Phaser.js and NativeScript",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-pixi/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-pixi",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Plugin for using pixi.js in NativeScript",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-polyfill",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Polyfill for making NativeScript compatible with web libs like pixi.js, three.js, phaser.js, babylon.js, etc....",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-svg/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-svg",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Add a plugin description",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas-three/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-three",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "Utilities for using THREE.js on NativeScript",
 	"main": "index",
 	"typings": "index.d.ts",

packages/canvas/WebGPU/GPUAdapter.ts

@@ -63,6 +63,29 @@ export class GPUAdapter {
 				options.requiredFeatures = ['texture-adapter-specific-format-features' as never];
 			}
 
+			if (!options.requiredLimits) {
+				if (__ANDROID__) {
+					options.requiredLimits = new global.CanvasModule.GPUSupportedLimits();
+					const limits = this[native_].limits;
+					if (limits.maxSampledTexturesPerShaderStage >= 128) {
+						options.requiredLimits.maxSampledTexturesPerShaderStage = 128;
+					}
+
+					if (limits.maxSamplersPerShaderStage >= 128) {
+						options.requiredLimits.maxSamplersPerShaderStage = 128;
+					}
+				}
+			} else {
+				if (options.requiredLimits && typeof options.requiredLimits === 'object' && options.requiredLimits?.constructor?.name !== 'GPUSupportedLimits') {
+					const requiredLimits = new global.CanvasModule.GPUSupportedLimits();
+					const keys = Object.keys(options.requiredLimits);
+					for (const key of keys) {
+						requiredLimits[key] = options.requiredLimits[key];
+					}
+					options.requiredLimits = requiredLimits;
+				}
+			}
+
 			this[native_].requestDevice(options, (error, device) => {
 				if (error) {
 					reject(error);

packages/canvas/WebGPU/GPUDevice.ts

@@ -155,10 +155,10 @@ export class GPUDevice extends EventTarget {
 					error,
 				});
 			} else {
-				//	console.error(error);
+				console.error(error);
 			}
 		} else {
-			//console.error(error);
+			console.error(error);
 		}
 	}
 
@@ -431,29 +431,6 @@ export class GPUDevice extends EventTarget {
 	createTexture(descriptor: { label?: string; size: GPUExtent3D; mipLevelCount?: number /* default=1 */; sampleCount?: number /* default=1 */; dimension?: '1d' | '2d' | '3d' /* default="2d" */; format; usage; viewFormats?: any[] /* default=[] */ }) {
 		const sizeIsArray = Array.isArray(descriptor.size);
 
-		function handleUnsupportedPlatformFormat(fragment: GPUFragmentState, method: string) {
-			// falls back to platform supported format ... maybe this can be removed once frameworks use the getPreferredCanvasFormat
-			if (__ANDROID__) {
-				let hasBrga = false;
-				fragment.targets = fragment.targets.map((target) => {
-					switch (target.format) {
-						case 'bgra8unorm':
-							target.format = 'rgba8unorm';
-							hasBrga = true;
-							break;
-						case 'bgra8unorm-srgb':
-							target.format = 'rgba8unorm-srgb';
-							hasBrga = true;
-							break;
-					}
-					return target;
-				});
-				if (hasBrga) {
-					console.warn(`GPUDevice:${method} using unsupported brga format falling back to rgba counterpart.`);
-				}
-			}
-		}
-
 		const opts = {
 			label: descriptor?.label,
 			mipLevelCount: descriptor?.mipLevelCount ?? 1,

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas",
-	"version": "2.0.0-webgpu.12",
+	"version": "2.0.0-webgpu.13",
 	"description": "DOM Canvas API for NativeScript",
 	"main": "index",
 	"typings": "index.d.ts",

tools/demo/canvas-pixi/index.ts

@@ -100,7 +100,7 @@ export class DemoSharedCanvasPixi extends DemoSharedBase {
 
 		//this.drawPatternWithCanvas(canvas);
 		//this.simpleWebGPU(canvas);
-		this.simplePlane(canvas);
+		//this.simplePlane(canvas);
 		//this.advance(canvas);
 		//this.container(canvas);
 		//this.explosion(canvas);
@@ -109,7 +109,7 @@ export class DemoSharedCanvasPixi extends DemoSharedBase {
 		//this.meshBasic(canvas);
 		//this.meshAdvance(canvas);
 		//this.renderTextureAdvance(canvas);
-		//this.starWarp(canvas);
+		this.starWarp(canvas);
 		//this.meshShader(canvas);
 		//this.meshSharingGeo(canvas);
 		//this.multiPassShaderGenMesh(canvas);
@@ -900,9 +900,12 @@ void main()
 		canvas.height = canvas.clientHeight * window.devicePixelRatio;
 		const app = new PIXI.Application();
 		await app.init({
+			preference: 'webgpu',
 			canvas,
 			width: canvas.width,
 			height: canvas.height,
+			autoDensity: false,
+			resolution: window.devicePixelRatio,
 		});
 
 		const stageSize = {
@@ -947,7 +950,7 @@ void main()
 		// Now create some items and randomly position them in the stuff container
 		for (let i = 0; i < 20; i++) {
 			const item = PIXI.Sprite.from(fruits[i % fruits.length]);
-			item.scale.set(item.scale.x * window.devicePixelRatio, item.scale.y * window.devicePixelRatio);
+			//item.scale.set(item.scale.x * window.devicePixelRatio, item.scale.y * window.devicePixelRatio);
 			item.x = Math.random() * 400 - 200;
 			item.y = Math.random() * 400 - 200;
 			item.anchor.set(0.5);
@@ -958,6 +961,8 @@ void main()
 		// Used for spinning!
 		let count = 0;
 
+		const ctx = canvas.getContext('webgpu');
+
 		app.ticker.add(() => {
 			for (let i = 0; i < items.length; i++) {
 				// rotate each item
@@ -988,6 +993,8 @@ void main()
 				target: renderTexture2,
 				clear: false,
 			});
+
+			ctx.presentSurface();
 		});
 	}
 
@@ -1089,69 +1096,47 @@ void main()
 		*/
 	}
 
-	dynamicGraphics(canvas) {
-		const context = canvas.getContext('webgl2');
-
-		const app = new PIXI.Application({ context, backgroundColor: 0x1099bb }) as any;
-
-		//const app = new PIXI.Application({ view: canvas.toHTMLCanvas(), antialias: false }) as any;
-
-		//	const app = new PIXI.Application({ antialias: true, resizeTo: window });
+	async dynamicGraphics(canvas) {
+		canvas.width = canvas.clientWidth * window.devicePixelRatio;
+		canvas.height = canvas.clientHeight * window.devicePixelRatio;
+		const app = new PIXI.Application();
 
-		//document.body.appendChild(app.view);
+		await app.init({
+			backgroundColor: 0x1099bb,
+			preference: 'webgpu',
+			canvas,
+			width: canvas.width,
+			height: canvas.height,
+			autoDensity: true,
+		});
 
 		app.stage.eventMode = 'static';
 		app.stage.hitArea = app.screen;
 
-		const graphics = new PIXI.Graphics();
+		const graphics = new Graphics();
 
-		// set a fill and line style
-		graphics.beginFill(0xff3300);
-		graphics.lineStyle(10, 0xffd900, 1);
-
-		// draw a shape
-		graphics.moveTo(50, 50);
-		graphics.lineTo(250, 50);
-		graphics.lineTo(100, 100);
-		graphics.lineTo(250, 220);
-		graphics.lineTo(50, 220);
-		graphics.lineTo(50, 50);
-		graphics.closePath();
-		graphics.endFill();
+		// Draw a shape
+		graphics.moveTo(50, 50).lineTo(250, 50).lineTo(100, 100).lineTo(250, 220).lineTo(50, 220).lineTo(50, 50).fill({ color: 0xff3300 }).stroke({ width: 10, color: 0xffd900 });
 
-		// set a fill and line style again
-		graphics.lineStyle(10, 0xff0000, 0.8);
-		graphics.beginFill(0xff700b, 1);
-
-		// draw a second shape
-		graphics.moveTo(210, 300);
-		graphics.lineTo(450, 320);
-		graphics.lineTo(570, 350);
-		graphics.quadraticCurveTo(600, 0, 480, 100);
-		graphics.lineTo(330, 120);
-		graphics.lineTo(410, 200);
-		graphics.lineTo(210, 300);
-		graphics.closePath();
-		graphics.endFill();
+		// Draw a second shape
+		graphics.moveTo(210, 300).lineTo(450, 320).lineTo(570, 350).quadraticCurveTo(600, 0, 480, 100).lineTo(330, 120).lineTo(410, 200).lineTo(210, 300).fill({ color: 0xff700b }).stroke({ width: 10, color: 0xff0000, alpha: 0.8 });
 
-		// draw a rectangle
-		graphics.lineStyle(2, 0x0000ff, 1);
-		graphics.drawRect(50, 250, 100, 100);
+		// Draw a rectangle
+		graphics.rect(50, 250, 100, 100);
+		graphics.stroke({ width: 2, color: 0x0000ff });
 
-		// draw a circle
-		graphics.lineStyle(0);
-		graphics.beginFill(0xffff0b, 0.5);
-		graphics.drawCircle(470, 200, 100);
-		graphics.endFill();
+		// Draw a circle
+		graphics.circle(470, 200, 100);
+		graphics.fill({ color: 0xffff0b, alpha: 0.5 });
 
-		graphics.lineStyle(20, 0x33ff00);
 		graphics.moveTo(30, 30);
 		graphics.lineTo(600, 300);
+		graphics.stroke({ width: 20, color: 0x33ff00 });
 
 		app.stage.addChild(graphics);
 
-		// let's create a moving shape
-		const thing = new PIXI.Graphics();
+		// Let's create a moving shape
+		const thing = new Graphics();
 
 		app.stage.addChild(thing);
 		thing.x = 800 / 2;
@@ -1160,28 +1145,33 @@ void main()
 		let count = 0;
 
 		// Just click on the stage to draw random lines
-		// window.app = app;
+		window.app = app;
 		app.stage.on('pointerdown', () => {
-			graphics.lineStyle(Math.random() * 30, Math.random() * 0xffffff, 1);
 			graphics.moveTo(Math.random() * 800, Math.random() * 600);
 			graphics.bezierCurveTo(Math.random() * 800, Math.random() * 600, Math.random() * 800, Math.random() * 600, Math.random() * 800, Math.random() * 600);
+			graphics.stroke({ width: Math.random() * 30, color: Math.random() * 0xffffff });
 		});
 
+		const ctx = canvas.getContext('webgpu');
+
+		// Animate the moving shape
 		app.ticker.add(() => {
 			count += 0.1;
 
 			thing.clear();
-			thing.lineStyle(10, 0xff0000, 1);
-			thing.beginFill(0xffff00, 0.5);
 
-			thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20);
-			thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20);
-			thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20);
-			thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20);
-			thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20);
-			thing.closePath();
+			thing
+				.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20)
+				.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20)
+				.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20)
+				.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20)
+				.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20)
+				.fill({ color: 0xffff00, alpha: 0.5 })
+				.stroke({ width: 10, color: 0xff0000 });
 
 			thing.rotation = count * 0.1;
+
+			ctx.presentSurface();
 		});
 	}
 
@@ -1298,7 +1288,6 @@ void main()
 			preference: 'webgpu',
 			width: canvas.width,
 			height: canvas.height,
-			autoDensity: false,
 		});
 
 		const ctx = canvas.getContext('webgpu');

tools/demo/canvas-three/index.ts

@@ -1,5 +1,5 @@
 import { DemoSharedBase } from '../utils';
-
+/*
 require('three/examples/jsm/nodes/math/MathNode');
 
 const NodeBuilder = require('three/examples/jsm/nodes/core/NodeBuilder').default;
@@ -59,6 +59,8 @@ ConstNode.prototype.generate = function (builder, output) {
 	return builder.format(this.generateConst(builder), type, output);
 };
 
+*/
+
 import * as THREE from 'three';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
 import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader';