@nativescript/canvas-three 2.0.0-webgpu.9 → 2.0.1

package/README.md

@@ -9,14 +9,47 @@ npm i three @nativescript/canvas-three
 ## Usage
 
 ```js
-import TNSTHREE from '@nativescript/canvas-three';
+import * as THREE from '@nativescript/canvas-three';
 ```
 
 ## Creating a Renderer
 
-#### `TNSTHREE.Renderer({ gl: WebGLRenderingContext, width: number, height: number, pixelRatio: number, ...extras })`
+#### Using WebGPU
 
-Given a `gl (context)` from an
+Add the following to the webpackconfig.js
+
+```js
+const webpack = require('@nativescript/webpack');
+const { resolve } = require('path');
+
+module.exports = (env) => {
+	....
+  /// the path depends on the location of node_modules in this example it's in the root of the plugin repo in a simple project it would be './node_modules/three/build.three.webgpu.js' and not '../../node_modules/three/build.three.webgpu.js'
+	webpack.chainWebpack((config) => {
+    config.resolve.alias.set('three', resolve(__dirname, '..', '..', 'node_modules', 'three', 'build', 'three.webgpu.js'));
+	});
+```
+
+```ts
+const renderer = new THREE.WebGPURenderer({ canvas, antialias: false });
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+await renderer.init();
+// grab the webgpu context as it's needed to present/render to the screen this is currently needed for now until it's removed in the future
+const context = canvas.getContext('webgpu');
+/// at the end of your render loop add the following
+// context.presentSurface();
+// e.g
+
+function render() {
+	renderer.render(scene, camera);
+	context.presentSurface();
+}
+```
+
+####
+
+Given a `gl (context)` from a
 [`Canvas`](https://github.com/nativescript/canvas), return a
 [`THREE.WebGLRenderer`](https://threejs.org/docs/#api/renderers/WebGLRenderer)
 that draws into it.
@@ -32,31 +65,29 @@ init();
 animate();
 
 function init() {
-  const context = canvas.getContext('webgl');
-
-  const { drawingBufferWidth: width, drawingBufferHeight: height } = context;
-  camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
-  camera.position.z = 1;
+	camera = new THREE.PerspectiveCamera(70, canvas.clientWidth / canvas.clientHeight, 0.01, 10);
+	camera.position.z = 1;
 
-  scene = new THREE.Scene();
+	scene = new THREE.Scene();
 
-  geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
-  material = new THREE.MeshNormalMaterial();
+	geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
+	material = new THREE.MeshNormalMaterial();
 
-  mesh = new THREE.Mesh(geometry, material);
-  scene.add(mesh);
+	mesh = new THREE.Mesh(geometry, material);
+	scene.add(mesh);
 
-  renderer = new THREE.WebGLRenderer({ context });
-  renderer.setSize(width, height);
+	const renderer = new THREE.WebGLRenderer({ canvas, antialias: false });
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
 }
 
 function animate() {
-  requestAnimationFrame(animate);
+	requestAnimationFrame(animate);
 
-  mesh.rotation.x += 0.01;
-  mesh.rotation.y += 0.02;
+	mesh.rotation.x += 0.01;
+	mesh.rotation.y += 0.02;
 
-  renderer.render(scene, camera);
+	renderer.render(scene, camera);
 }
 ```
 

package/index.d.ts

@@ -1 +1,2 @@
-export {};
+import '@nativescript/canvas-polyfill';
+export * from 'three';

package/index.js

@@ -1,4 +1,5 @@
-require('@nativescript/canvas-polyfill');
+import '@nativescript/canvas-polyfill';
 import * as THREE from 'three';
 global.THREE = global.window.THREE = global.THREE || THREE;
+export * from 'three';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/canvas-three/index.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,+BAA+B,CAAC,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC9B,MAAc,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/canvas-three/index.ts"],"names":[],"mappings":"AACA,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC9B,MAAc,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC;AACpE,cAAc,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-three",
-  "version": "2.0.0-webgpu.9",
+  "version": "2.0.1",
   "description": "Utilities for using THREE.js on NativeScript",
   "main": "index",
   "typings": "index.d.ts",
@@ -33,8 +33,8 @@
   "readmeFilename": "README.md",
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "webgpu",
-    "three": "~0.157.0"
+    "@nativescript/canvas-polyfill": "*",
+    "three": "~0.169.0"
   },
   "types": "./index.d.ts"
 }