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. // operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the square. // Now create an array of positions for the square.
const positions = [ const cube = [
// Front face // Front face
-1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
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,
-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 // Now pass the list of positions into WebGL to build the
// shape. We do this by creating a Float32Array from the // shape. We do this by creating a Float32Array from the
// JavaScript array, then use it to fill the current buffer. // JavaScript array, then use it to fill the current buffer.
@ -179,23 +221,35 @@ function initBuffers(gl: any) {
new Float32Array(positions), new Float32Array(positions),
gl.STATIC_DRAW); gl.STATIC_DRAW);
const faceColors = [ const myColors = [
[1.0, 1.0, 1.0, 1.0], [1.0, 1.0, 1.0, 1.0],
[1.0, 0.0, 0.0, 1.0], [1.0, 0.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0], [0.0, 1.0, 0.0, 1.0],
[0.0, 0.0, 1.0, 1.0], [0.0, 0.0, 1.0, 1.0],
[1.0, 1.0, 0.0, 1.0], [1.0, 1.0, 0.0, 1.0],
[1.0, 0.0, 1.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. // Convert the array of colors into a table for all the vertices.
let colors: any = []; let colors: any = [];
for (let j = 0; j < faceColors.length; ++j) { 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 // 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(); const colorBuffer = gl.createBuffer();
@ -209,7 +263,7 @@ function initBuffers(gl: any) {
// indices into the vertex array to specify each triangle's // indices into the vertex array to specify each triangle's
// position. // position.
const indices = [ const indicesTemplates = [
0, 1, 2, 0, 2, 3, 0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7, 4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11, 8, 9, 10, 8, 10, 11,
@ -218,6 +272,14 @@ function initBuffers(gl: any) {
20, 21, 22, 20, 22, 23, 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 // Now send the element array to GL
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, 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 // Now move the drawing position a bit to where we want to
// start drawing the square. // start drawing the square.
mat4.rotate(modelViewMatrix,
modelViewMatrix,
Math.PI,
[0, 1, 0]);
mat4.translate( mat4.translate(
modelViewMatrix, modelViewMatrix,
modelViewMatrix, modelViewMatrix,
[-0.0, 0.0, -6.0]); [0.0, 0.0, 48]);
mat4.rotate(modelViewMatrix, mat4.rotate(modelViewMatrix,
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 type = gl.UNSIGNED_SHORT;
const offset = 0; const offset = 0;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);

2
views/index.ejs
View File

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