Builds a torus as a gltf file and displays it with https://modelviewer.dev/
based on
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @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))),
},
],