thallada/planet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shape bin files, shape selection

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -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"

42
src/index.html
View File

@ -2,12 +2,50 @@
<html>
<head>
<meta charset=utf-8 />
<title>My first three.js app</title>
<title>Icosahedrons and Hexspheres Generated in Rust</title>
<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%; }
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>
</head>
<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>
</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])
})

BIN
src/shapes/hexsphere_r1_d0.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d1.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d2.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d3.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d4.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d5.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/hexsphere_r1_d6.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d0.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d1.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d2.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d3.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d4.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d5.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d6.bin Normal file
View File

Binary file not shown.

BIN
src/shapes/icosahedron_r1_d7.bin Normal file
View File

Binary file not shown.

7
src/index.js → src/three_index.js
View File

@ -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");

16
webpack.config.js
View File

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