From ae9661f4b1647d0ca49c80754bbd07bd31341080 Mon Sep 17 00:00:00 2001 From: robonen Date: Sat, 26 Nov 2022 04:48:51 +0700 Subject: [PATCH] feat(engine): integration rendering and inputs --- packages/matrix/dist/matrix.wasm | Bin 858 -> 0 bytes packages/rendering/camera.ts | 0 packages/rendering/types.ts | 6 +- src/components/board.vue | 149 +++++++++++++++++++++---------- src/components/form/range.vue | 7 +- src/composables/states.ts | 34 +++++++ src/pages/figure.vue | 17 ++-- 7 files changed, 155 insertions(+), 58 deletions(-) delete mode 100644 packages/matrix/dist/matrix.wasm create mode 100644 packages/rendering/camera.ts create mode 100644 src/composables/states.ts diff --git a/packages/matrix/dist/matrix.wasm b/packages/matrix/dist/matrix.wasm deleted file mode 100644 index 751095f7fe8918c32aef3ebb42b35366974091d8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 858 zcmZuvOKaOe5T4zY`zlmtU7!OncMJCE<%1yipW0I+~x09<%&_kj=`m@61??|9I%?EbeSTgdK*|E&E6 z*f^7epKRo<@>R9F;Sg*6ovQ1FDNDU*s$C5*UYTZh{X?(zB`{y>WnJkjvtE|DU}J)& zF*;u_1rM~oEUURG_1x6C5K`-_+-!Q}&~D$Q$1YWB%)HEd=#Bq4oP+%32)|{wyyY_# zp8`Oa7V;hIJDF&dhi>LHYCwk2kb-wxH6p{dYMg3LFA_6O zzdigp01Ct(;ptO}&*T9@U&R=z6h~@8)#7Ye91Fk{JNt-nhiG}k~Ko?yeRiDhM?FL8twM}4R!k#w zX>y4^dWG^)+L%N^F`rAKY&CJn+-}vxqHV|9iq%rZFC++8!(ItmQyMJjgdkojwmd(; zTWT3+uZm|cdhv!Y9$KmsOf#pLrgk7pF|-tUr+}r{>vvd_XplfO$uzYoNMjXrk#vUz zUE~u#%SB2F@13<-9XyycunF)pEbccQy0LUF3D0 gFHhz-%>O#yubVwCO0&KU&tIROot~YX@4MjnUo7&b5dZ)H diff --git a/packages/rendering/camera.ts b/packages/rendering/camera.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/rendering/types.ts b/packages/rendering/types.ts index f02de17..b9b7863 100644 --- a/packages/rendering/types.ts +++ b/packages/rendering/types.ts @@ -1,2 +1,4 @@ -export type Point = [number, number]; -export type Vector = [Point, Point, Point]; +export type Vec3 = [number, number, number]; +export type Vec4 = [number, number, number, number]; + +export type Mat4 = [Vec4, Vec4, Vec4, Vec4]; diff --git a/src/components/board.vue b/src/components/board.vue index 6eec020..6fa0d0a 100644 --- a/src/components/board.vue +++ b/src/components/board.vue @@ -21,26 +21,48 @@ onMounted(() => { const centerX = sizeX / 2; const centerY = sizeY / 2; + const figureSizeH = 200; + const figureSizeW = 200; + const points: Point[] = [ - [500, 500, 500, 1], - [500, 500, 700, 1], - [500, 700, 500, 1], - [500, 700, 700, 1], - [700, 500, 500, 1], - [700, 500, 700, 1], - [700, 700, 500, 1], - [700, 700, 700, 1], + [0, 0, figureSizeH, 1], + [0, 100, 0, 1], + [95.1, 30.9, 0, 1], + [58.8, -80.9, 0, 1], + [-58.8, -80.9, 0, 1], + [-95.1, 30.9, 0, 1], ]; - const faces: [number, number, number, number][] = [ - [0, 1, 3, 2], - [0, 1, 5, 4], - [0, 2, 6, 4], - [1, 3, 7, 5], - [2, 3, 7, 6], - [4, 5, 7, 6], + const faces = [ + [0, 1, 2], + [0, 2, 3], + [0, 3, 4], + [0, 4, 5], + [0, 5, 1], + [1, 2, 3, 4, 5], ]; + // Cube + // const points: Point[] = [ + // [0, 0, 0, 1], + // [0, 0, 100, 1], + // [0, 100, 0, 1], + // [0, 100, 100, 1], + // [100, 0, 0, 1], + // [100, 0, 100, 1], + // [100, 100, 0, 1], + // [100, 100, 100, 1], + // ]; + // + // const faces = [ + // [0, 1, 3, 2], + // [0, 1, 5, 4], + // [0, 2, 6, 4], + // [1, 3, 7, 5], + // [2, 3, 7, 6], + // [4, 5, 7, 6], + // ]; + // Rotate around X axis const rotateX = (angle: number): Point[] => { const rad = (angle * Math.PI) / 180; @@ -83,12 +105,35 @@ onMounted(() => { ]; }; + const rotate = (x: number, y: number, z: number): Point[] => { + return mul([rotateX(x), rotateY(y), rotateZ(z)]); + }; + // Translate const translate = (x: number, y: number, z: number): Point[] => { return [ - [1, 0, 0, x], - [0, 1, 0, y], - [0, 0, 1, z], + [1, 0, 0, 0], + [0, 1, 0, 0], + [0, 0, 1, 0], + [x, y, z, 1], + ]; + }; + + // Scale + const scaleMatrix = (x: number, y: number, z: number): Point[] => { + return [ + [x, 0, 0, 0], + [0, y, 0, 0], + [0, 0, z, 0], + [0, 0, 0, 1], + ]; + }; + + const axonometryIsometric = (): Point[] => { + return [ + [0.707, -0.408, 0, 0], + [0, 0.816, 0, 0], + [-0.707, -0.408, 1, 0], [0, 0, 0, 1], ]; }; @@ -116,46 +161,52 @@ onMounted(() => { return result; }; + const mul = (matrices: Point[][]) => { + let result = matrices[0]; + + for (let i = 1; i < matrices.length; i++) { + result = multiply(result, matrices[i]); + } + + return result; + }; + // Draw figure - const drawFigure = ( - points: Point[], - faces: [number, number, number, number][] - ) => { + const drawFigure = (points: Point[], faces: number[][]) => { ctx.clearRect(0, 0, sizeX, sizeY); - faces.forEach((face) => { + for (const face of faces) { ctx.beginPath(); - ctx.moveTo(points[face[0]][0], points[face[0]][1]); - ctx.lineTo(points[face[1]][0], points[face[1]][1]); - ctx.lineTo(points[face[2]][0], points[face[2]][1]); - ctx.lineTo(points[face[3]][0], points[face[3]][1]); + + for (let i = 0; i < face.length; i++) { + const [x, y] = points[face[i]]; + + if (i === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + } + ctx.closePath(); ctx.stroke(); - }); + } }; - // Rotation animation all axis in the center of the canvas - let angle = 0; - - const animate = () => { - const matrix = multiply( - multiply( - multiply(translate(centerX, centerY, 0), rotateX(angle)), - rotateY(angle) - ), - rotateZ(angle) + useTransformations((translation, rotation, scale) => { + drawFigure( + mul([ + points, + scaleMatrix(scale[0], scale[1], scale[2]), + rotate(rotation[0], rotation[1], rotation[2]), + translate(translation[0], translation[1], translation[2]), + rotateX(-90), + axonometryIsometric(), + translate(centerX, centerY + figureSizeH / 2, 0), + ]), + faces ); - - const rotatedPoints = multiply(points, matrix); - - drawFigure(rotatedPoints, faces); - - angle += angle < 360 ? 1 : -360; - - requestAnimationFrame(animate); - }; - - animate(); + }); }); diff --git a/src/components/form/range.vue b/src/components/form/range.vue index bec2288..9fa12dd 100644 --- a/src/components/form/range.vue +++ b/src/components/form/range.vue @@ -26,6 +26,11 @@ const onChange = (event: Event) => { value.value = target.valueAsNumber; emit('change', value.value); }; + +const reset = () => { + value.value = defaultValue; + emit('change', value.value); +};