diff --git a/package.json b/package.json
index 3cd6063..ddbd03c 100644
--- a/package.json
+++ b/package.json
@@ -5,18 +5,22 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "start": "webpack-dev-server --mode development --watch --progress --hot",
+ "start": "webpack-dev-server --mode development --watch --progress --hot --host 0.0.0.0 --port 8888 --public mule.hallada.net:8888",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
+ "angle-normals": "^1.0.0",
+ "regl": "^1.3.11",
+ "regl-camera": "^2.1.1",
"three": "^0.101.1",
"three-orbit-controls": "^82.1.0"
},
"devDependencies": {
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
+ "url-loader": "^3.0.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
diff --git a/src/index.html b/src/index.html
index 518a05f..2965710 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,12 +2,50 @@
- My first three.js app
+ Icosahedrons and Hexspheres Generated in Rust
+
+
+ Loading...
+
+
diff --git a/src/regl_index.js b/src/regl_index.js
new file mode 100644
index 0000000..0b0e014
--- /dev/null
+++ b/src/regl_index.js
@@ -0,0 +1,132 @@
+import hexsphere_0 from "./shapes/hexsphere_r1_d0.bin"
+import hexsphere_1 from "./shapes/hexsphere_r1_d1.bin"
+import hexsphere_2 from "./shapes/hexsphere_r1_d2.bin"
+import hexsphere_3 from "./shapes/hexsphere_r1_d3.bin"
+import hexsphere_4 from "./shapes/hexsphere_r1_d4.bin"
+import hexsphere_5 from "./shapes/hexsphere_r1_d5.bin"
+import hexsphere_6 from "./shapes/hexsphere_r1_d6.bin"
+import icosahedron_0 from "./shapes/icosahedron_r1_d0.bin"
+import icosahedron_1 from "./shapes/icosahedron_r1_d1.bin"
+import icosahedron_2 from "./shapes/icosahedron_r1_d2.bin"
+import icosahedron_3 from "./shapes/icosahedron_r1_d3.bin"
+import icosahedron_4 from "./shapes/icosahedron_r1_d4.bin"
+import icosahedron_5 from "./shapes/icosahedron_r1_d5.bin"
+import icosahedron_6 from "./shapes/icosahedron_r1_d6.bin"
+import icosahedron_7 from "./shapes/icosahedron_r1_d7.bin"
+
+const shapes = {
+ "hexsphere_0": hexsphere_0,
+ "hexsphere_1": hexsphere_1,
+ "hexsphere_2": hexsphere_2,
+ "hexsphere_3": hexsphere_3,
+ "hexsphere_4": hexsphere_4,
+ "hexsphere_5": hexsphere_5,
+ "hexsphere_6": hexsphere_6,
+ "icosahedron_0": icosahedron_0,
+ "icosahedron_1": icosahedron_1,
+ "icosahedron_2": icosahedron_2,
+ "icosahedron_3": icosahedron_3,
+ "icosahedron_4": icosahedron_4,
+ "icosahedron_5": icosahedron_5,
+ "icosahedron_6": icosahedron_6,
+ "icosahedron_7": icosahedron_7,
+}
+
+const regl = require("regl")({
+ extensions: ["OES_element_index_uint"],
+})
+const camera = require("regl-camera")(regl, {
+ center: [0, 0, 0],
+ distance: 3,
+})
+
+const drawShape = hexsphere => regl({
+ vert: `
+ precision mediump float;
+ uniform mat4 projection, view;
+ attribute vec3 position, normal, color;
+ varying vec3 fragNormal, fragPosition, fragColor;
+ void main() {
+ fragNormal = normal;
+ fragPosition = position;
+ fragColor = color;
+ gl_Position = projection * view * vec4(position, 1.0);
+ }`,
+
+ frag: `
+ precision mediump float;
+ struct Light {
+ vec3 color;
+ vec3 position;
+ };
+ uniform Light lights[1];
+ varying vec3 fragNormal, fragPosition, fragColor;
+ void main() {
+ vec3 normal = normalize(fragNormal);
+ vec3 light = vec3(0.1, 0.1, 0.1);
+ for (int i = 0; i < 1; i++) {
+ vec3 lightDir = normalize(lights[i].position - fragPosition);
+ float diffuse = max(0.0, dot(lightDir, normal));
+ light += diffuse * lights[i].color;
+ }
+ gl_FragColor = vec4(fragColor * light, 1.0);
+ }`,
+
+ attributes: {
+ position: hexsphere.positions,
+ normal: hexsphere.normals,
+ color: hexsphere.colors,
+ },
+ elements: hexsphere.cells,
+ uniforms: {
+ "lights[0].color": [1, 1, 1],
+ "lights[0].position": ({ tick }) => {
+ const t = 0.008 * tick
+ return [
+ 1000 * Math.cos(t),
+ 1000 * Math.sin(t),
+ 1000 * Math.sin(t)
+ ]
+ },
+ },
+})
+
+let draw = null
+
+const loadShape = shape => {
+ fetch(shape)
+ .then(response => response.arrayBuffer())
+ .then(buffer => {
+ let reader = new DataView(buffer);
+ let numVertices = reader.getUint32(0, true);
+ let numCells = reader.getUint32(4, true);
+ const shapeData = {
+ positions: new Float32Array(buffer, 8, numVertices * 3),
+ normals: new Float32Array(buffer, numVertices * 12 + 8, numVertices * 3),
+ colors: new Float32Array(buffer, numVertices * 24 + 8, numVertices * 3),
+ cells: new Uint32Array(buffer, numVertices * 36 + 8, numCells * 3),
+ }
+ draw = drawShape(shapeData)
+ regl.frame(() => {
+ regl.clear({
+ depth: 1,
+ color: [0, 0, 0, 1]
+ })
+
+ camera(() => {
+ draw()
+ })
+ })
+ shapeSelectLoading.style.display = "none"
+ })
+}
+
+const shapeSelect = document.querySelector("select#shape-select")
+const shapeSelectLoading = document.querySelector("#shape-loading")
+shapeSelect.value = "hexsphere_4"
+loadShape(hexsphere_4)
+
+shapeSelect.addEventListener("change", event => {
+ shapeSelectLoading.style.display = "inline"
+ loadShape(shapes[event.target.value])
+})
diff --git a/src/shapes/hexsphere_r1_d0.bin b/src/shapes/hexsphere_r1_d0.bin
new file mode 100644
index 0000000..9203c2b
Binary files /dev/null and b/src/shapes/hexsphere_r1_d0.bin differ
diff --git a/src/shapes/hexsphere_r1_d1.bin b/src/shapes/hexsphere_r1_d1.bin
new file mode 100644
index 0000000..e5dd22f
Binary files /dev/null and b/src/shapes/hexsphere_r1_d1.bin differ
diff --git a/src/shapes/hexsphere_r1_d2.bin b/src/shapes/hexsphere_r1_d2.bin
new file mode 100644
index 0000000..d66c01d
Binary files /dev/null and b/src/shapes/hexsphere_r1_d2.bin differ
diff --git a/src/shapes/hexsphere_r1_d3.bin b/src/shapes/hexsphere_r1_d3.bin
new file mode 100644
index 0000000..ecf673b
Binary files /dev/null and b/src/shapes/hexsphere_r1_d3.bin differ
diff --git a/src/shapes/hexsphere_r1_d4.bin b/src/shapes/hexsphere_r1_d4.bin
new file mode 100644
index 0000000..638d9a3
Binary files /dev/null and b/src/shapes/hexsphere_r1_d4.bin differ
diff --git a/src/shapes/hexsphere_r1_d5.bin b/src/shapes/hexsphere_r1_d5.bin
new file mode 100644
index 0000000..a84c84a
Binary files /dev/null and b/src/shapes/hexsphere_r1_d5.bin differ
diff --git a/src/shapes/hexsphere_r1_d6.bin b/src/shapes/hexsphere_r1_d6.bin
new file mode 100644
index 0000000..5c0b722
Binary files /dev/null and b/src/shapes/hexsphere_r1_d6.bin differ
diff --git a/src/shapes/icosahedron_r1_d0.bin b/src/shapes/icosahedron_r1_d0.bin
new file mode 100644
index 0000000..86b90d3
Binary files /dev/null and b/src/shapes/icosahedron_r1_d0.bin differ
diff --git a/src/shapes/icosahedron_r1_d1.bin b/src/shapes/icosahedron_r1_d1.bin
new file mode 100644
index 0000000..e07e9d6
Binary files /dev/null and b/src/shapes/icosahedron_r1_d1.bin differ
diff --git a/src/shapes/icosahedron_r1_d2.bin b/src/shapes/icosahedron_r1_d2.bin
new file mode 100644
index 0000000..05f8a08
Binary files /dev/null and b/src/shapes/icosahedron_r1_d2.bin differ
diff --git a/src/shapes/icosahedron_r1_d3.bin b/src/shapes/icosahedron_r1_d3.bin
new file mode 100644
index 0000000..5c57ac4
Binary files /dev/null and b/src/shapes/icosahedron_r1_d3.bin differ
diff --git a/src/shapes/icosahedron_r1_d4.bin b/src/shapes/icosahedron_r1_d4.bin
new file mode 100644
index 0000000..78b700d
Binary files /dev/null and b/src/shapes/icosahedron_r1_d4.bin differ
diff --git a/src/shapes/icosahedron_r1_d5.bin b/src/shapes/icosahedron_r1_d5.bin
new file mode 100644
index 0000000..086c806
Binary files /dev/null and b/src/shapes/icosahedron_r1_d5.bin differ
diff --git a/src/shapes/icosahedron_r1_d6.bin b/src/shapes/icosahedron_r1_d6.bin
new file mode 100644
index 0000000..0a4b7e2
Binary files /dev/null and b/src/shapes/icosahedron_r1_d6.bin differ
diff --git a/src/shapes/icosahedron_r1_d7.bin b/src/shapes/icosahedron_r1_d7.bin
new file mode 100644
index 0000000..0b1d400
Binary files /dev/null and b/src/shapes/icosahedron_r1_d7.bin differ
diff --git a/src/index.js b/src/three_index.js
similarity index 96%
rename from src/index.js
rename to src/three_index.js
index 13e7cfb..e83b5f8 100644
--- a/src/index.js
+++ b/src/three_index.js
@@ -6,8 +6,9 @@ const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
console.time("init geo");
-const geometry = new THREE.IcosahedronGeometry(10, 6);
+const geometry = new THREE.IcosahedronGeometry(1, 1);
console.timeEnd("init geo");
+console.log(geometry);
console.time("Hexsphere");
const vertToFaces = {};
@@ -36,6 +37,8 @@ for (let i = 0; i < geometry.faces.length; i += 1) {
}
}
+console.log(vertToFaces);
+
const originalVertCount = geometry.vertices.length;
const calculateCentroid = (pa, pb, pc) => {
@@ -145,6 +148,8 @@ newGeometry.addAttribute("position", new THREE.Float32BufferAttribute(newVertice
newGeometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
newGeometry.computeFaceNormals();
newGeometry.computeVertexNormals();
+const nonBuffer = new THREE.Geometry().fromBufferGeometry(newGeometry);
+console.log(nonBuffer);
console.timeEnd("find geo");
diff --git a/webpack.config.js b/webpack.config.js
index 62214b1..82fba2f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,15 +2,25 @@ const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
- entry: "./src/index.js",
+ entry: "./src/regl_index.js",
output: {
filename: "main.js",
- path: path.resolve(__dirname, "dist")
+ path: path.resolve(__dirname, "docs")
},
module: {
rules: [
{
- test: /\.(png|jpg|gif)$/,
+ test: /\.(png|jpg|gif|bin)$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {},
+ },
+ ],
+ },
+ {
+ test: /\.json$/,
+ type: 'javascript/auto',
use: [
{
loader: 'file-loader',