Merge pull request #15 from GEngine-js/refactor/Model

Refactor/model

.gitignore

@@ -1,9 +1,24 @@
 node_modules
-npm-debug.log
+dist
+
 public/workers
 *.mp4
 *.flv
 *.rar
 *.zip
 *.7z
-.catch/**
+.catch/**
+
+.DS_Store
+
+# Log files
+npm-debug.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+registry=https://registry.npmmirror.com

.nvmrc

@@ -0,0 +1 @@
+v18.16.0

.prettierrc

@@ -11,6 +11,7 @@
 	"quoteProps": "as-needed",
 	"requirePragma": false,
 	"semi": true,
+	"singleAttributePerLine": false,
 	"singleQuote": false,
 	"tabWidth": 4,
 	"trailingComma": "none",

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["PolyMeilex.wgsl", "ritwickdey.LiveServer", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

README.md

@@ -1,117 +1,135 @@
-## Note:
+# GEngine.js
 
--   WebGPU Engine
+WebGPU Engine
 
 ## install
 
--   `npm i @gengine-js/gengine`
+```shell
+$ yarn add @gengine-js/gengine
+```
 
-## build
+## develop
 
--   `npm install`
+```shell
+# install
+$ yarn
 
--   `npm run build`
+# dev
+$ yarn dev
 
-## Usage
+# build
+$ yarn build
+```
 
-       <script type="module">
-            import {
-                Mesh,PerspectiveCamera,Scene,
-                PhongMaterial,Vector3,Color,
-                SpotLight,PointLight,SphereGeometry,OrbitControl
-            } from "../dist/index.js";
-            const init = async () => {
+## Usage
 
-                const geometry = new SphereGeometry(10);
+```html
+<script type="module">
+	import {
+		Mesh,
+		PerspectiveCamera,
+		Scene,
+		PhongMaterial,
+		Vector3,
+		Color,
+		SpotLight,
+		PointLight,
+		SphereGeometry,
+		OrbitControl
+	} from "../dist/index.js";
+	const init = async () => {
+		const geometry = new SphereGeometry(10);
 
-                const phongMaterial = new PhongMaterial();
-                phongMaterial.color = new Color(1.0, 0.0, 0.0);
+		const phongMaterial = new PhongMaterial();
+		phongMaterial.color = new Color(1.0, 0.0, 0.0);
 
-                const primitive = new Mesh(geometry, phongMaterial);
+		const primitive = new Mesh(geometry, phongMaterial);
 
-                primitive.rotateX(-Math.PI / 2);
+		primitive.rotateX(-Math.PI / 2);
 
-                const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
+		const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
 
-                camera.position.set(0, 20, 0);
+		camera.position.set(0, 20, 0);
 
-                camera.lookAt(0, 0, 0);
+		camera.lookAt(0, 0, 0);
 
-                const spotLight = new SpotLight(new Vector3(1.0, 1.0, 1.0), 1.0, 15, 6, 1);
-                spotLight.position = new Vector3(0, 20, 0);
+		const spotLight = new SpotLight(new Vector3(1.0, 1.0, 1.0), 1.0, 15, 6, 1);
+		spotLight.position = new Vector3(0, 20, 0);
 
-                const scene = new Scene({ container: "app" });
+		const scene = new Scene({ container: "app" });
 
-                axes.scale.set(10, 10, 10);
+		axes.scale.set(10, 10, 10);
 
-                const control = new OrbitControl(camera, document.getElementById("app"));
+		const control = new OrbitControl(camera, document.getElementById("app"));
 
-                scene.add(primitive);
+		scene.add(primitive);
 
-                scene.setCamera(camera);
+		scene.setCamera(camera);
 
-                scene.add(pointLight);
+		scene.add(pointLight);
 
-                window.addEventListener("resize", onWindowResize);
+		window.addEventListener("resize", onWindowResize);
 
-                function onWindowResize() {
-                    camera.aspect = window.innerWidth / window.innerHeight;
-                    scene.resize(window.innerWidth, window.innerHeight);
-                }
-                function animate() {
-                    control.update();
-                    requestAnimationFrame(animate);
-                    scene.render();
-                }
-                animate();
-            };
-            init();
-        </script>
+		function onWindowResize() {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			scene.resize(window.innerWidth, window.innerHeight);
+		}
+		function animate() {
+			control.update();
+			requestAnimationFrame(animate);
+			scene.render();
+		}
+		animate();
+	};
+	init();
+</script>
+```
 
 ## Native
 
-       <script type="module">
-       	import { Model, Context, Texture, RenderTarget, Attachment } from "webgpu-gengine-js";
-    		import { mat4, vec3 } from "gl-matrix";
-            	const init = async () => {
-                //init context
-    			const context = new Context({
-    				canvas: null,
-    				container: document.getElementById("app"),
-    				pixelRatio: 1
-    			});
-    			const { canvas, presentationFormat } = context;
-    			await context.init();
-    			const { width, height, depth } = context.presentationSize;
-    			const colorAttachment = new Attachment(
-    				{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
-    				{
-    					textureView: () => {
-    						return context.context.getCurrentTexture().createView();
-    					}
-    				}
-    			);
-    			const depthTexture = new Texture({
-    				label: "resolveDepth",
-    				size: { width, height, depth },
-    				format: "depth24plus",
-    				usage: GPUTextureUsage.RENDER_ATTACHMENT
-    			});
-    			const depthAttachment = new Attachment(1.0, { texture: depthTexture });
-                //fbo
-    			const canvasRenderTarget = new RenderTarget("render", [colorAttachment], depthAttachment);
-    			const aspect = canvas.width / canvas.height;
-    			const projectionMatrix = mat4.perspective([], (2 * Math.PI) / 5, aspect, 1, 100.0);
-    			const modelViewProjectionMatrix = mat4.create();
-    			const model = new Model({
-    				shaderId: "model",
-    				frag: `
+```html
+<script type="module">
+	import { Model, Context, Texture, RenderTarget, Attachment } from "webgpu-gengine-js";
+	import { mat4, vec3 } from "gl-matrix";
+	const init = async () => {
+		//init context
+		const context = new Context({
+			canvas: null,
+			container: document.getElementById("app"),
+			pixelRatio: 1
+		});
+		const { canvas, presentationFormat } = context;
+		await context.init();
+		const { width, height, depth } = context.presentationSize;
+		const colorAttachment = new Attachment(
+			{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
+			{
+				textureView: () => {
+					return context.context.getCurrentTexture().createView();
+				}
+			}
+		);
+		const depthTexture = new Texture({
+			label: "resolveDepth",
+			size: { width, height, depth },
+			format: "depth24plus",
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
+		const depthAttachment = new Attachment(1.0, { texture: depthTexture });
+		//fbo
+		const canvasRenderTarget = new RenderTarget("render", [colorAttachment], depthAttachment);
+		const aspect = canvas.width / canvas.height;
+		const projectionMatrix = mat4.perspective([], (2 * Math.PI) / 5, aspect, 1, 100.0);
+		const modelViewProjectionMatrix = mat4.create();
+		const model = new Model({
+			shaderId: "model",
+			frag: `
                             @fragment
                             fn main(@location(0) fragPosition: vec4<f32>) -> @location(0) vec4<f32> {
                                  return fragPosition;
                             }
                         `,
-    				vert: `
+			vert: `
                             struct Uniforms {
                                 modelViewProjectionMatrix : mat4x4<f32>,
                             }
@@ -128,65 +146,71 @@
                                 return output;
                             }
                         `,
-    				vertexBuffers: [
-    					{
-    						stepMode: "vertex",//optional
-    						uid: "vertAttr",//must
-    						attributes: {
-    							position: { size: 4, value: positions },
-    							color: { size: 4, value: colors },
-    						}
-    					}
-    				],
-    				uniformBuffers: [
-    					{
-    						type: "uniform",
-    						uid: "systemMatrix",
-    						uniforms: {
-    							modelViewProjectionMatrix: {
-    								type: "mat4",
-    								value: () => {
-    									let viewMatrix = mat4.identity([]);
-    									mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
-    									const now = Date.now() / 1000;
-    									mat4.rotate(viewMatrix,viewMatrix,1,vec3.fromValues(Math.sin(now), Math.cos(now), 0));
-    									mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
-    									return modelViewProjectionMatrix;
-    								}
-    							}
-    						}
-    					}
-    				],
-    				renderState: {
-    					targets: [
-    						{
-    							format: presentationFormat
-    						}
-    					],
-    					primitive: {
-    						topology: "triangle-list",
-    						cullMode: "back"
-    					},
-    					depthStencil: {
-    						depthWriteEnabled: true,
-    						depthCompare: "less",
-    						format: "depth24plus"
-    					}
-    				},
-    				count: 36,
-    				instances: 1
-    			});
-
-    			function animate() {
-    				requestAnimationFrame(animate);
-    				const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
-    				model.render({ device: context.device, passEncoder });
-    				canvasRenderTarget.endRenderPass();
-    			}
-    			animate();
-    		};
-    		init();
-        </script>
+			vertexBuffers: [
+				{
+					stepMode: "vertex", //optional
+					uid: "vertAttr", //must
+					attributes: {
+						position: { size: 4, value: positions },
+						color: { size: 4, value: colors }
+					}
+				}
+			],
+			uniformBuffers: [
+				{
+					type: "uniform",
+					uid: "systemMatrix",
+					uniforms: {
+						modelViewProjectionMatrix: {
+							type: "mat4",
+							value: () => {
+								let viewMatrix = mat4.identity([]);
+								mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
+								const now = Date.now() / 1000;
+								mat4.rotate(
+									viewMatrix,
+									viewMatrix,
+									1,
+									vec3.fromValues(Math.sin(now), Math.cos(now), 0)
+								);
+								mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
+								return modelViewProjectionMatrix;
+							}
+						}
+					}
+				}
+			],
+			renderState: {
+				targets: [
+					{
+						format: presentationFormat
+					}
+				],
+				primitive: {
+					topology: "triangle-list",
+					cullMode: "back"
+				},
+				depthStencil: {
+					depthWriteEnabled: true,
+					depthCompare: "less",
+					format: "depth24plus"
+				}
+			},
+			count: 36,
+			instances: 1
+		});
+
+		function animate() {
+			requestAnimationFrame(animate);
+			const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
+			model.render({ device: context.device, passEncoder });
+			canvasRenderTarget.endRenderPass();
+		}
+		animate();
+	};
+	init();
+</script>
+```
 
 ## feature