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',