Add shape bin files, shape selection

This commit is contained in:
Tyler Hallada 2020-01-19 01:12:49 -05:00
parent 1dce74a9ea
commit 856cdafcb4
20 changed files with 196 additions and 7 deletions

View File

@ -5,18 +5,22 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "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" "build": "webpack"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"angle-normals": "^1.0.0",
"regl": "^1.3.11",
"regl-camera": "^2.1.1",
"three": "^0.101.1", "three": "^0.101.1",
"three-orbit-controls": "^82.1.0" "three-orbit-controls": "^82.1.0"
}, },
"devDependencies": { "devDependencies": {
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"url-loader": "^3.0.0",
"webpack": "^4.29.0", "webpack": "^4.29.0",
"webpack-cli": "^3.2.1", "webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14" "webpack-dev-server": "^3.1.14"

View File

@ -2,12 +2,50 @@
<html> <html>
<head> <head>
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>My first three.js app</title> <title>Icosahedrons and Hexspheres Generated in Rust</title>
<style> <style>
html, body { margin: 0; padding: 0; overflow: hidden; } html, body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
color: #eee;
background-color: black;
font-family: sans-serif;
}
canvas { width: 100%; height: 100%; } canvas { width: 100%; height: 100%; }
div.loading-container { display: flex; align-items: center; justify-content: center; height: 100%; }
div.select-container { position: fixed; top: 0px; width: 100%; z-index: 1; margin: 10px; }
p.loading { font-size: 32px; }
</style> </style>
</head> </head>
<body> <body>
<div class="select-container">
<label>
Rendered Shape:&nbsp;
<select id="shape-select">
<option value="hexsphere_0">Hexsphere 0</option>
<option value="hexsphere_1">Hexsphere 1</option>
<option value="hexsphere_2">Hexsphere 2</option>
<option value="hexsphere_3">Hexsphere 3</option>
<option value="hexsphere_4" selected>Hexsphere 4</option>
<option value="hexsphere_5">Hexsphere 5</option>
<option value="hexsphere_6">Hexsphere 6</option>
<option value="hexsphere_7">Hexsphere 7</option>
<option value="icosahedron_0">Icosahedron 0</option>
<option value="icosahedron_1">Icosahedron 1</option>
<option value="icosahedron_2">Icosahedron 2</option>
<option value="icosahedron_3">Icosahedron 3</option>
<option value="icosahedron_4">Icosahedron 4</option>
<option value="icosahedron_5">Icosahedron 5</option>
<option value="icosahedron_6">Icosahedron 6</option>
<option value="icosahedron_7">Icosahedron 7</option>
</select>
</label>
<span id="shape-loading" style="display: none">Loading...</span>
</div>
<div class="loading-container">
<p class="loading">Loading...</p>
</div>
</body> </body>
</html> </html>

132
src/regl_index.js Normal file
View File

@ -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])
})

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -6,8 +6,9 @@ const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
console.time("init geo"); console.time("init geo");
const geometry = new THREE.IcosahedronGeometry(10, 6); const geometry = new THREE.IcosahedronGeometry(1, 1);
console.timeEnd("init geo"); console.timeEnd("init geo");
console.log(geometry);
console.time("Hexsphere"); console.time("Hexsphere");
const vertToFaces = {}; 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 originalVertCount = geometry.vertices.length;
const calculateCentroid = (pa, pb, pc) => { 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.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
newGeometry.computeFaceNormals(); newGeometry.computeFaceNormals();
newGeometry.computeVertexNormals(); newGeometry.computeVertexNormals();
const nonBuffer = new THREE.Geometry().fromBufferGeometry(newGeometry);
console.log(nonBuffer);
console.timeEnd("find geo"); console.timeEnd("find geo");

View File

@ -2,15 +2,25 @@ const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { module.exports = {
entry: "./src/index.js", entry: "./src/regl_index.js",
output: { output: {
filename: "main.js", filename: "main.js",
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, "docs")
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.(png|jpg|gif)$/, test: /\.(png|jpg|gif|bin)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.json$/,
type: 'javascript/auto',
use: [ use: [
{ {
loader: 'file-loader', loader: 'file-loader',