/** @jsxImportSource npm:hono@3/jsx */ import { Buffer } from "https://deno.land/std/io/buffer.ts"; import { accepts } from "https://esm.town/v/vladimyr/accepts"; import { Hono } from "npm:hono"; import { html } from "npm:hono/html"; import type { Child, FC } from "npm:hono/jsx"; import { jsxRenderer, useRequestContext } from "npm:hono/jsx-renderer"; import { gzip } from "npm:pako"; const app = new Hono(); function createTorus(radius = 1, tube = 0.4, radialSegments = 12, tubularSegments = 48, arc = Math.PI * 2) { const indicesArray = []; const positionArray = []; const uvArray = []; const vertex = [0, 0, 0]; // generate positions and uvs for (let j = 0; j <= radialSegments; j++) { for (let i = 0; i <= tubularSegments; i++) { const u = (i / tubularSegments) * arc; const v = (j / radialSegments) * Math.PI * 2; // position vertex[0] = (radius + tube * Math.cos(v)) * Math.cos(u); vertex[1] = (radius + tube * Math.cos(v)) * Math.sin(u); vertex[2] = tube * Math.sin(v); positionArray.push(vertex[0], vertex[1], vertex[2]); // uv uvArray.push(i / tubularSegments); uvArray.push(j / radialSegments); } } // generate indices for (let j = 1; j <= radialSegments; j++) { for (let i = 1; i <= tubularSegments; i++) { // indices const a = (tubularSegments + 1) * j + i - 1; const b = (tubularSegments + 1) * (j - 1) + i - 1; const c = (tubularSegments + 1) * (j - 1) + i; const d = (tubularSegments + 1) * j + i; // faces indicesArray.push(a, b, d); indicesArray.push(b, c, d); } } return { indicesArray, positionArray, uvArray }; } // indices // position // texcoord // material // primitive // mesh // node (with mesh and translation 0,0,0) // scene (with single node) // I think we make 3 buffers // (for simplicity, even though they can be combined.) // indices, positions and uvs const { indicesArray, positionArray, uvArray } = createTorus(); const indices_uint16 = new Uint16Array(indicesArray); const position_float32 = new Float32Array(positionArray); const uv_float32 = new Float32Array(uvArray); const COMPONENT_TYPE_U16 = 5123; const COMPONENT_TYPE_F32 = 5126; const TARGET_ARRAY_BUFFER = 34962; // vertex data const TARGET_ELEMENT_ARRAY_BUFFER = 34963; // indices const test_scene = { asset: { version: "2.0", }, buffers: [ { byteLength: indices_uint16.byteLength, uri: "data:application/octet-stream;base64," + btoa(String.fromCharCode(...new Uint8Array(indices_uint16.buffer))), }, { byteLength: position_float32.byteLength, uri: "data:application/octet-stream;base64," + btoa(String.fromCharCode(...new Uint8Array(position_float32.buffer))), }, { byteLength: uv_float32.byteLength, uri: "data:application/octet-stream;base64," + btoa(String.fromCharCode(...new Uint8Array(uv_float32.buffer))), }, ], bufferViews: [ { buffer: 0, byteOffset: 0, byteLength: indicesArray.length * 16 / 8, target: TARGET_ELEMENT_ARRAY_BUFFER, }, { buffer: 1, byteOffset: 0, byteLength: positionArray.length * 32 / 8, target: TARGET_ARRAY_BUFFER, byteStride: 32 / 8 * 3, // 3 floats }, { buffer: 2, byteOffset: 0, byteLength: uvArray.length * 32 / 8, target: TARGET_ARRAY_BUFFER, byteStride: 32 / 8 * 2, // 2 floats }, ], accessors: [ { bufferView: 0, componentType: COMPONENT_TYPE_U16, count: indicesArray.length, type: "SCALAR", }, { bufferView: 1, componentType: COMPONENT_TYPE_F32, count: positionArray.length / 3, type: "VEC3", }, { bufferView: 2, componentType: COMPONENT_TYPE_F32, count: uvArray.length / 2, type: "VEC2", }, ], materials: [ { name: "material", pbrMetallicRoughness: { baseColorFactor: [ 0.6938717612856897, 0.12743768042608497, 0.09989872823822872, 1, ], metallicFactor: 0, roughnessFactor: 1, }, }, ], meshes: [ { primitives: [ { mode: 4, indices: 0, attributes: { "POSITION": 1, "TEXCOORD_0": 2, }, material: 0, }, ], }, ], nodes: [ { name: "torus", mesh: 0, }, ], scenes: [ { name: "scene", nodes: [0], }, ], scene: 0, }; const Layout: FC<{ children: Child }> = ({ children }) => { return ( {children} ); }; app.use("*", jsxRenderer(({ children }) => )); app.get("/", (c) => { const accept = accepts(c.req.raw); if ([c.req.query("format"), accept.types("html", "json")].includes("json")) { c.header("Content-Type", "model/gltf+json"); return c.body(JSON.stringify(test_scene)); } return c.render(

Torus

, ); }); export default app.fetch;