Add shape bin files, shape selection
This commit is contained in:
+5
-1
@@ -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"
|
||||||
|
|||||||
+40
-2
@@ -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:
|
||||||
|
<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>
|
||||||
|
|||||||
@@ -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.
@@ -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");
|
||||||
|
|
||||||
|
|
||||||
+13
-3
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user