gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

many cube rotating around a point

This commit is contained in:
gbrochar 2020-11-23 06:38:10 +01:00
parent 7edddc0e57
commit 341dbe1023
2 changed files with 76 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/client/main.ts
View File

@ -139,7 +139,7 @@ function initBuffers(gl: any) {
// operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the square.
const positions = [
const cube = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
@ -171,6 +171,48 @@ function initBuffers(gl: any) {
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];
const positions = [];
for (let j = -2; j < 3; j++) {
for (let i = 0; i < cube.length; i++) {
positions.push(cube[i] + j * 3);
}
}
for (let k = -1; k < 3; k++) {
for (let j = -2; j < 3; j++) {
if (j != 0) {
for (let i = 0; i < cube.length; i++) {
if (i % 3 != k) {
positions.push(cube[i] + j * 3);
} else {
positions.push(cube[i]);
}
}
for (let i = 0; i < cube.length; i++) {
if (i % 3 == k) {
positions.push(cube[i] + j * 3);
} else {
positions.push(cube[i]);
}
}
for (let i = 0; i < cube.length; i++) {
if (i % 3 == k) {
positions.push(cube[i] + j * 3);
} else {
positions.push(cube[i] - j * 3);
}
}
for (let i = 0; i < cube.length; i++) {
if (i % 3 == k) {
positions.push(cube[i] + j * 3);
} else {
positions.push(cube[i] - j * 3);
}
}
}
}
}
// Now pass the list of positions into WebGL to build the
// shape. We do this by creating a Float32Array from the
// JavaScript array, then use it to fill the current buffer.
@ -179,23 +221,35 @@ function initBuffers(gl: any) {
new Float32Array(positions),
gl.STATIC_DRAW);
const faceColors = [
const myColors = [
[1.0, 1.0, 1.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 0.0, 1.0],
[0.0, 1.0, 1.0, 1.0],
];
let faceColors: any = [];
for (let i = 0; i < 70; i++) {
faceColors = faceColors.concat(myColors);
}
// Convert the array of colors into a table for all the vertices.
let colors: any = [];
for (let j = 0; j < faceColors.length; ++j) {
const c = faceColors[j];
const c = [
faceColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
];
// Repeat each color four times for the four vertices of the face
colors = colors.concat(c, c, c, c);
colors = colors.concat(c[0], c[1], c[2], c[3]);
}
const colorBuffer = gl.createBuffer();
@ -209,7 +263,7 @@ function initBuffers(gl: any) {
// indices into the vertex array to specify each triangle's
// position.
const indices = [
const indicesTemplates = [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
@ -218,6 +272,14 @@ function initBuffers(gl: any) {
20, 21, 22, 20, 22, 23,
];
const indices = [];
for (let j = 0; j < 70; j++) {
for (let i = 0; i < indicesTemplates.length; i++) {
indices.push(indicesTemplates[i] + 24 * j);
}
}
// Now send the element array to GL
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
@ -272,10 +334,16 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
// Now move the drawing position a bit to where we want to
// start drawing the square.
mat4.rotate(modelViewMatrix,
modelViewMatrix,
Math.PI,
[0, 1, 0]);
mat4.translate(
modelViewMatrix,
modelViewMatrix,
[-0.0, 0.0, -6.0]);
[0.0, 0.0, 48]);
mat4.rotate(modelViewMatrix,
modelViewMatrix,
@ -344,7 +412,7 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
}
{
const vertexCount = 36;
const vertexCount = 36 * 69;
const type = gl.UNSIGNED_SHORT;
const offset = 0;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);

2
views/index.ejs
View File

@ -12,7 +12,7 @@
</head>
<body>
<div id="root">
<canvas id='glCanvas' width='640' height='480'></canvas>
<canvas id='glCanvas' width='640' height='640'></canvas>
</div>
<script src="js/bundle.js"></script>
</body>