benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webgl

Browse Source 
Former-commit-id: 3a198e8d90c58ef393dea3fee0c5bfffe42eda1c
This commit is contained in:
Ben
2022-02-25 16:19:45 +00:00
parent d7a884c010
commit a4b38a6d61
10 changed files with 9031 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
README.md
View File

Binary file not shown.

6609
client/public/gl-matrix.js Normal file
View File

File diff suppressed because it is too large Load Diff

67
client/public/index.html
View File

@@ -9,6 +9,11 @@
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script src="components/components.js"></script>
<script src="gl-matrix.js"></script>
<script src="utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glm-js@0.0.6-c/build/glm-js.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<loading-component></loading-component>
@@ -27,5 +32,67 @@
</content-margin>
<canvas id="webglviewer" width="640" height="480"></canvas>
<script type="x-shader/vs" id="vertex-draw">
#version 300 es
layout(std140, column_major) uniform;
layout(location=0) in vec4 position;
layout(location=1) in vec2 uv;
layout(location=2) in vec4 normal;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uScene;
uniform mat4 uModel;
out vec3 vPosition;
out vec2 vUV;
out vec3 vNormal;
void main() {
vec4 worldPosition = uModel * position;
vPosition = worldPosition.xyz;
vUV = uv;
vNormal = (uModel * normal).xyz;
gl_Position = uScene.viewProj * worldPosition;
}
</script>
<script type="x-shader/vf" id="fragment-draw">
#version 300 es
precision highp float;
layout(std140, column_major) uniform;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uScene;
uniform sampler2D tex;
in vec3 vPosition;
in vec2 vUV;
in vec3 vNormal;
out vec4 fragColor;
void main() {
vec3 color = vec3(vUV, 1.0);
vec3 normal = normalize(vNormal);
vec3 eyeVec = normalize(uScene.eyePosition.xyz - vPosition);
vec3 incidentVec = normalize(vPosition - uScene.lightPosition.xyz);
vec3 lightVec = -incidentVec;
float diffuse = max(dot(lightVec, normal), 0.0);
float highlight = pow(max(dot(eyeVec, reflect(incidentVec, normal)), 0.0), 100.0);
float ambient = 0.1;
fragColor = vec4(color * (diffuse + highlight + ambient), 1.0);
}
</script>
</limited-margin>
</body>

125
client/public/index.js Normal file
View File

@@ -0,0 +1,125 @@
function main() {
const canvas = document.querySelector('#webglviewer');
const gl = canvas.getContext('webgl2');
// Only continue if WebGL is available and working
if (gl === null) {
alert('Unable to initialize WebGL. Your browser or machine may not support it.');
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
const vsSource = document.getElementById('vertex-draw').text.trim();
const fsSource = document.getElementById('fragment-draw').text.trim();
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(vertexShader));
}
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(fragmentShader));
}
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(program));
}
const sceneUniformsLocation = gl.getUniformBlockIndex(program, 'SceneUniforms');
gl.uniformBlockBinding(program, sceneUniformsLocation, 0);
const modelMatrixLocation = gl.getUniformLocation(program, 'uModel');
gl.useProgram(program);
const box = utils.createBox({dimensions: [.5, .6, .5]});
const numVertices = box.positions.length / 3;
const cubeArray = gl.createVertexArray();
gl.bindVertexArray(cubeArray);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, box.positions, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);
const uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, box.uvs, gl.STATIC_DRAW);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(1);
const normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, box.normals, gl.STATIC_DRAW);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(2);
const projMatrix = mat4.create();
mat4.perspective(projMatrix, Math.PI / 2, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 10.0);
const viewMatrix = mat4.create();
const eyePosition = vec3.fromValues(1, 1, 1);
mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
const viewProjMatrix = mat4.create();
mat4.multiply(viewProjMatrix, projMatrix, viewMatrix);
const lightPosition = vec3.fromValues(1, 1, 0.5);
const modelMatrix = mat4.create();
const rotateXMatrix = mat4.create();
const rotateYMatrix = mat4.create();
const sceneUniformData = new Float32Array(24);
sceneUniformData.set(viewProjMatrix);
sceneUniformData.set(eyePosition, 16);
sceneUniformData.set(lightPosition, 20);
const sceneUniformBuffer = gl.createBuffer();
gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, sceneUniformBuffer);
gl.bufferData(gl.UNIFORM_BUFFER, sceneUniformData, gl.STATIC_DRAW);
let angleX = 0;
let angleY = 0;
function draw() {
angleX += 0.01;
angleY += 0.015;
mat4.fromXRotation(rotateXMatrix, angleX);
mat4.fromYRotation(rotateYMatrix, angleY);
mat4.multiply(modelMatrix, rotateXMatrix, rotateYMatrix);
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, numVertices);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
}
window.onload = main;

BIN
client/public/res/khronos_webgl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

12
client/public/res/lego_stud.mtl Normal file
View File

@@ -0,0 +1,12 @@
# Blender MTL File: 'None'
# Material Count: 1
newmtl Material.005
Ns 225.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

1828
client/public/res/lego_stud.obj Normal file
View File

File diff suppressed because it is too large Load Diff

374
client/public/utils.js Normal file
View File

@@ -0,0 +1,374 @@
///////////////////////////////////////////////////////////////////////////////////
// The MIT License (MIT)
//
// Copyright (c) 2017 Tarek Sherif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
///////////////////////////////////////////////////////////////////////////////////
(function() {
var translateMat = mat4.create();
var rotateXMat = mat4.create();
var rotateYMat = mat4.create();
var rotateZMat = mat4.create();
var scaleMat = mat4.create();
var zeros = [0, 0, 0];
var ones = [1, 1, 1];
window.utils = {
xformMatrix: function xformMatrix(xform, translate, rotate, scale) {
translate = translate || zeros;
rotate = rotate || zeros;
scale = scale || ones;
mat4.fromTranslation(translateMat, translate);
mat4.fromXRotation(rotateXMat, rotate[0]);
mat4.fromYRotation(rotateYMat, rotate[1]);
mat4.fromZRotation(rotateZMat, rotate[2]);
mat4.fromScaling(scaleMat, scale);
mat4.multiply(xform, rotateXMat, scaleMat);
mat4.multiply(xform, rotateYMat, xform);
mat4.multiply(xform, rotateZMat, xform);
mat4.multiply(xform, translateMat, xform);
},
loadCubemapImages: function loadCubeMapImages(urls, ok) {
var numImages = 6;
var negX = new Image();
var posX = new Image();
var negY = new Image();
var posY = new Image();
var negZ = new Image();
var posZ = new Image();
function onload() {
if (--numImages === 0) {
ok(negX, posX, negY, posY, negZ, posZ);
}
}
negX.onload = onload;
posX.onload = onload;
negY.onload = onload;
posY.onload = onload;
negZ.onload = onload;
posZ.onload = onload;
negX.src = urls.negX;
posX.src = urls.posX;
negY.src = urls.negY;
posY.src = urls.posY;
negZ.src = urls.negZ;
posZ.src = urls.posZ;
},
createBox: function createBox(options) {
options = options || {};
var dimensions = options.dimensions || [1, 1, 1];
var position = options.position || [-dimensions[0] / 2, -dimensions[1] / 2, -dimensions[2] / 2];
var x = position[0];
var y = position[1];
var z = position[2];
var width = dimensions[0];
var height = dimensions[1];
var depth = dimensions[2];
var fbl = {x: x, y: y, z: z + depth};
var fbr = {x: x + width, y: y, z: z + depth};
var ftl = {x: x, y: y + height, z: z + depth};
var ftr = {x: x + width, y: y + height, z: z + depth};
var bbl = {x: x, y: y, z: z };
var bbr = {x: x + width, y: y, z: z };
var btl = {x: x, y: y + height, z: z };
var btr = {x: x + width, y: y + height, z: z };
var positions = new Float32Array([
//front
fbl.x, fbl.y, fbl.z,
fbr.x, fbr.y, fbr.z,
ftl.x, ftl.y, ftl.z,
ftl.x, ftl.y, ftl.z,
fbr.x, fbr.y, fbr.z,
ftr.x, ftr.y, ftr.z,
//right
fbr.x, fbr.y, fbr.z,
bbr.x, bbr.y, bbr.z,
ftr.x, ftr.y, ftr.z,
ftr.x, ftr.y, ftr.z,
bbr.x, bbr.y, bbr.z,
btr.x, btr.y, btr.z,
//back
fbr.x, bbr.y, bbr.z,
bbl.x, bbl.y, bbl.z,
btr.x, btr.y, btr.z,
btr.x, btr.y, btr.z,
bbl.x, bbl.y, bbl.z,
btl.x, btl.y, btl.z,
//left
bbl.x, bbl.y, bbl.z,
fbl.x, fbl.y, fbl.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
fbl.x, fbl.y, fbl.z,
ftl.x, ftl.y, ftl.z,
//top
ftl.x, ftl.y, ftl.z,
ftr.x, ftr.y, ftr.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
ftr.x, ftr.y, ftr.z,
btr.x, btr.y, btr.z,
//bottom
bbl.x, bbl.y, bbl.z,
bbr.x, bbr.y, bbr.z,
fbl.x, fbl.y, fbl.z,
fbl.x, fbl.y, fbl.z,
bbr.x, bbr.y, bbr.z,
fbr.x, fbr.y, fbr.z,
]);
var uvs = new Float32Array([
//front
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
//right
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
//back
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
//left
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
//top
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
//bottom
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1
]);
var normals = new Float32Array(positions.length);
var i, count;
var ni;
for (i = 0, count = positions.length / 3; i < count; i++) {
ni = i * 3;
normals[ni] = parseInt(i / 6, 10) === 1 ? 1 :
parseInt(i / 6, 10) === 3 ? -1 : 0;
normals[ni+1] = parseInt(i / 6, 10) === 4 ? 1 :
parseInt(i / 6, 10) === 5 ? -1 : 0;
normals[ni+2] = parseInt(i / 6, 10) === 0 ? 1 :
parseInt(i / 6, 10) === 2 ? -1 : 0;
}
return {
positions: positions,
normals: normals,
uvs: uvs
};
},
createSphere: function createSphere(options) {
options = options || {};
var long_bands = options.long_bands || 32;
var lat_bands = options.lat_bands || 32;
var radius = options.radius || 1;
var lat_step = Math.PI / lat_bands;
var long_step = 2 * Math.PI / long_bands;
var num_positions = long_bands * lat_bands * 4;
var num_indices = long_bands * lat_bands * 6;
var lat_angle, long_angle;
var positions = new Float32Array(num_positions * 3);
var normals = new Float32Array(num_positions * 3);
var uvs = new Float32Array(num_positions * 2);
var indices = new Uint16Array(num_indices);
var x1, x2, x3, x4,
y1, y2,
z1, z2, z3, z4,
u1, u2,
v1, v2;
var i, j;
var k = 0, l = 0;
var vi, ti;
for (i = 0; i < lat_bands; i++) {
lat_angle = i * lat_step;
y1 = Math.cos(lat_angle);
y2 = Math.cos(lat_angle + lat_step);
for (j = 0; j < long_bands; j++) {
long_angle = j * long_step;
x1 = Math.sin(lat_angle) * Math.cos(long_angle);
x2 = Math.sin(lat_angle) * Math.cos(long_angle + long_step);
x3 = Math.sin(lat_angle + lat_step) * Math.cos(long_angle);
x4 = Math.sin(lat_angle + lat_step) * Math.cos(long_angle + long_step);
z1 = Math.sin(lat_angle) * Math.sin(long_angle);
z2 = Math.sin(lat_angle) * Math.sin(long_angle + long_step);
z3 = Math.sin(lat_angle + lat_step) * Math.sin(long_angle);
z4 = Math.sin(lat_angle + lat_step) * Math.sin(long_angle + long_step);
u1 = 1 - j / long_bands;
u2 = 1 - (j + 1) / long_bands;
v1 = 1 - i / lat_bands;
v2 = 1 - (i + 1) / lat_bands;
vi = k * 3;
ti = k * 2;
positions[vi] = x1 * radius;
positions[vi+1] = y1 * radius;
positions[vi+2] = z1 * radius; //v0
positions[vi+3] = x2 * radius;
positions[vi+4] = y1 * radius;
positions[vi+5] = z2 * radius; //v1
positions[vi+6] = x3 * radius;
positions[vi+7] = y2 * radius;
positions[vi+8] = z3 * radius; // v2
positions[vi+9] = x4 * radius;
positions[vi+10] = y2 * radius;
positions[vi+11] = z4 * radius; // v3
normals[vi] = x1;
normals[vi+1] = y1;
normals[vi+2] = z1;
normals[vi+3] = x2;
normals[vi+4] = y1;
normals[vi+5] = z2;
normals[vi+6] = x3;
normals[vi+7] = y2;
normals[vi+8] = z3;
normals[vi+9] = x4;
normals[vi+10] = y2;
normals[vi+11] = z4;
uvs[ti] = u1;
uvs[ti+1] = v1;
uvs[ti+2] = u2;
uvs[ti+3] = v1;
uvs[ti+4] = u1;
uvs[ti+5] = v2;
uvs[ti+6] = u2;
uvs[ti+7] = v2;
indices[l ] = k;
indices[l + 1] = k + 1;
indices[l + 2] = k + 2;
indices[l + 3] = k + 2;
indices[l + 4] = k + 1;
indices[l + 5] = k + 3;
k += 4;
l += 6;
}
}
return {
positions: positions,
normals: normals,
uvs: uvs,
indices: indices
};
},
computeBoundingBox: function (position, options) {
options = options || {};
var geo = options.geo || false;
var res = {
min: vec3.create(),
max: vec3.create()
};
vec3.set(res.min, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
vec3.set(res.max, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY);
for ( var i = 0, len = position.length; i < len; i+=3 ) {
res.min[0] = Math.min(position[i], res.min[0]);
res.max[0] = Math.max(position[i], res.max[0]);
res.min[1] = Math.min(position[i], res.min[1]);
res.max[1] = Math.max(position[i], res.max[1]);
res.min[2] = Math.min(position[i], res.min[2]);
res.max[2] = Math.max(position[i], res.max[2]);
}
if (geo) {
var size = vec3.create();
vec3.subtract(size, res.max, res.min);
res.geo = utils.createBox({
position: res.min,
width: size[0],
height: size[1],
depth: size[2]
});
}
return res;
}
}
})();

14
docs/API.md
View File

@@ -10,6 +10,7 @@ automatically every request
| Type | Route | Queries | Auth? | Notes |
| --- | --- | --- | -- | --- |
| GET | /api/search/ | query, page | no | |
| GET | /api/bricks/ | query, page | no | |
| GET | /api/sets/ | query, page | no | |
| GET | /api/brick/:id/ | | no | |
@@ -23,6 +24,19 @@ automatically every request
| POST | /api/auth/basket/:id | | yes | manipulate basket content |
| DEL | /api/auth/basket/:id | quantity | yes | if no id, delete whole |
## Query structure
### /api/search/
### /api/bricks/
### /api/sets/
### /api/brick/:id/
### /api/set/:id/
### /api/cdn/:id/
### /api/auth/login/
### /api/auth/signup/
### /api/auth/orders/
### /api/auth/basket/
## Response Structure
```js

4
src/index.js
View File

@@ -11,8 +11,8 @@ async function main() {
logLevel: process.env.LOG_LEVEL,
logToConsole: process.env.LOG_CONSOLE,
logFile: process.env.LOG_FILE,
networkHost: process.env.LOG_NET_HOST,
networkPort: process.env.LOG_NET_PORT,
// networkHost: process.env.LOG_NET_HOST,
// networkPort: process.env.LOG_NET_PORT,
});
Logger.Info('Pre-Init Complete');