Merge branch 'prod' of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi into prod
This commit is contained in:
commit
da82987e60
|
@ -0,0 +1,25 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
=====================
|
||||||
|
|
||||||
|
Copyright © 2025 Luca Conte, Dennis Allerkamp
|
||||||
|
|
||||||
|
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.
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>CG1 MDI</title>
|
<title>CG1 MDI</title>
|
||||||
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||||
<script src="matrix-math.js"></script>
|
<script src="matrix-math.js"></script>
|
||||||
<script src="shader.js"></script>
|
<script src="shader.js"></script>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
@ -50,7 +51,7 @@
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: block;
|
display: block;
|
||||||
border: solid 2px #11111b;
|
border: solid 2px #11111b;
|
||||||
background-color: #313244;
|
background-color: #31324480;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,29 +62,19 @@
|
||||||
#controls {
|
#controls {
|
||||||
left: 20px;
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#interpolate {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="display">
|
<div id="display">
|
||||||
<canvas id="cv"></canvas>
|
<canvas id="cv"></canvas>
|
||||||
<div id="stats">
|
<div id="stats">
|
||||||
|
<div>
|
||||||
FPS: <span id="fps"></span> - <span id="ms"></span>
|
FPS: <span id="fps"></span> - <span id="ms"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="controls">
|
|
||||||
<div>
|
|
||||||
Click & Drag to move camera
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Scroll to zoom
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes">
|
|
||||||
<div style="margin-left: 20px;">Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
|
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
|
@ -91,6 +82,62 @@
|
||||||
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
|
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="controls">
|
||||||
|
<div>
|
||||||
|
$$
|
||||||
|
\color{red}
|
||||||
|
\begin{pmatrix}
|
||||||
|
1 & 0 & 0 & 0 \\
|
||||||
|
0 & 1 & 0 & 0 \\
|
||||||
|
0 & 0 & -1 & 0 \\
|
||||||
|
0 & 0 & 0 & 1
|
||||||
|
\end{pmatrix}
|
||||||
|
\begin{pmatrix}
|
||||||
|
\frac{2}{r-l} & 0 & 0 & 0 \\
|
||||||
|
0 & \frac{2}{t-b} & 0 & 0 \\
|
||||||
|
0 & 0 & \frac{2}{f-n} & 0 \\
|
||||||
|
0 & 0 & 0 & 1
|
||||||
|
\end{pmatrix}
|
||||||
|
\begin{pmatrix}
|
||||||
|
1 & 0 & 0 & - \frac{r+l}{2} \\
|
||||||
|
0 & 1 & 0 & - \frac{t+b}{2} \\
|
||||||
|
0 & 0 & 1 & \frac{n+f}{2} \\
|
||||||
|
0 & 0 & 0 & 1
|
||||||
|
\end{pmatrix}
|
||||||
|
\begin{pmatrix}
|
||||||
|
1 & 0 & 0 & 0 \\
|
||||||
|
0 & 1 & 0 & 0 \\
|
||||||
|
0 & 0 & 1 + \frac{f}{n} & f \\
|
||||||
|
0 & 0 & - \frac{1}{n} & 0
|
||||||
|
\end{pmatrix}
|
||||||
|
\color{green}
|
||||||
|
\begin{pmatrix}
|
||||||
|
u_x & u_y & u_z & 0 \\
|
||||||
|
v_x & v_y & v_z & 0 \\
|
||||||
|
n_x & n_y & n_z & 0 \\
|
||||||
|
0 & 0 & 0 & 1
|
||||||
|
\end{pmatrix}
|
||||||
|
\begin{pmatrix}
|
||||||
|
1 & 0 & 0 & -e_x \\
|
||||||
|
0 & 1 & 0 & -e_y \\
|
||||||
|
0 & 0 & 1 & -e_z \\
|
||||||
|
0 & 0 & 0 & 1
|
||||||
|
\end{pmatrix}
|
||||||
|
$$
|
||||||
|
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
|
||||||
|
<datalist id="steplist">
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</datalist>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -173,6 +173,32 @@ function mat4BuildLookAt(out, eye, look, up) {
|
||||||
out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = t[2];
|
out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = t[2];
|
||||||
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
|
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
|
||||||
}
|
}
|
||||||
|
function mat4BuildLookAt1(out, eye, look, up) {
|
||||||
|
out[0] = 1; out[4] = 0; out[8] = 0; out[12] = -eye[0];
|
||||||
|
out[1] = 0; out[5] = 1; out[9] = 0; out[13] = -eye[1];
|
||||||
|
out[2] = 0; out[6] = 0; out[10] = 1; out[14] = -eye[2];
|
||||||
|
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
|
||||||
|
}
|
||||||
|
function mat4BuildLookAt2(out, eye, look, up) {
|
||||||
|
let n = [];
|
||||||
|
let u = [];
|
||||||
|
let v = [];
|
||||||
|
|
||||||
|
vec3Subtract(n, eye, look);
|
||||||
|
|
||||||
|
vec3CrossProduct(u, up, n);
|
||||||
|
|
||||||
|
vec3CrossProduct(v, n, u);
|
||||||
|
|
||||||
|
vec3Normalise(n, n);
|
||||||
|
vec3Normalise(u, u);
|
||||||
|
vec3Normalise(v, v);
|
||||||
|
|
||||||
|
out[0] = u[0]; out[4] = u[1]; out[8] = u[2]; out[12] = 0;
|
||||||
|
out[1] = v[0]; out[5] = v[1]; out[9] = v[2]; out[13] = 0;
|
||||||
|
out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = 0;
|
||||||
|
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* builds a projection matrix, overwriting out
|
* builds a projection matrix, overwriting out
|
||||||
|
@ -209,6 +235,43 @@ function mat4BuildPerspective(out, fovy, aspect, n, f) {
|
||||||
|
|
||||||
mat4BuildProjection(out, r, l, t, b, n, f);
|
mat4BuildProjection(out, r, l, t, b, n, f);
|
||||||
}
|
}
|
||||||
|
function mat4BuildPerspective1(out, fovy, aspect, n, f) {
|
||||||
|
mat4Identity(out);
|
||||||
|
out[10] = 1.0 + f / n;
|
||||||
|
out[11] = -1.0 / n;
|
||||||
|
out[14] = f;
|
||||||
|
out[15] = 0.0;
|
||||||
|
}
|
||||||
|
function mat4BuildPerspective2(out, fovy, aspect, n, f) {
|
||||||
|
let t = n * Math.tan(0.5 * fovy);
|
||||||
|
let b = -t;
|
||||||
|
|
||||||
|
let r = aspect * t;
|
||||||
|
let l = -r;
|
||||||
|
|
||||||
|
mat4Identity(out);
|
||||||
|
out[12] = -(r + l) / 2.0;
|
||||||
|
out[13] = -(t + b) / 2.0;
|
||||||
|
out[14] = (f + n) / 2.0;
|
||||||
|
}
|
||||||
|
function mat4BuildPerspective3(out, fovy, aspect, n, f) {
|
||||||
|
let t = n * Math.tan(0.5 * fovy);
|
||||||
|
let b = -t;
|
||||||
|
|
||||||
|
let r = aspect * t;
|
||||||
|
let l = -r;
|
||||||
|
|
||||||
|
mat4Identity(out);
|
||||||
|
|
||||||
|
out[0] = 2.0 / (r - l);
|
||||||
|
out[5] = 2.0 / (t - b);
|
||||||
|
out[10] = 2.0 / (f - n);
|
||||||
|
}
|
||||||
|
function mat4BuildPerspective4(out, fovy, aspect, n, f) {
|
||||||
|
mat4Identity(out);
|
||||||
|
out[10] = -1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* linearly interpolates between a and b, storing the result in out
|
* linearly interpolates between a and b, storing the result in out
|
||||||
|
|
|
@ -25,8 +25,8 @@ let cameraVertexBuffer;
|
||||||
|
|
||||||
let lastFrame = Date.now();
|
let lastFrame = Date.now();
|
||||||
|
|
||||||
let interpolateProjection = 0;
|
let t = 0.0;
|
||||||
let interpolateLookAt = 0;
|
let interpolate = [0, 0, 0, 0, 0, 0];
|
||||||
|
|
||||||
let displayMatricesVirtually = true;
|
let displayMatricesVirtually = true;
|
||||||
let virtualRealInterpolation = 1;
|
let virtualRealInterpolation = 1;
|
||||||
|
@ -64,34 +64,31 @@ async function init() {
|
||||||
|
|
||||||
|
|
||||||
// input handling
|
// input handling
|
||||||
document.getElementById("interpolateProjection").addEventListener("input", (e) => {
|
document.getElementById("interpolate").addEventListener("input", (e) => {
|
||||||
interpolateProjection = e.target.value;
|
t = 6.0 - e.target.value;
|
||||||
if (interpolateProjection <= 0) {
|
if (t <= 2.0) {
|
||||||
document.getElementById("interpolateLookAt").disabled = "";
|
invertZAxis = false;
|
||||||
} else {
|
}
|
||||||
document.getElementById("interpolateLookAt").disabled = "yes";
|
else if (t <= 5.0) {
|
||||||
|
invertZAxis = false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
invertZAxis = true;
|
||||||
|
}
|
||||||
|
for (let i = 0; i < 6; ++i) {
|
||||||
|
if (i > t) {
|
||||||
|
interpolate[i] = 0.0;
|
||||||
|
}
|
||||||
|
else if (i+1 > t) {
|
||||||
|
interpolate[i] = t - Math.floor(t);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
interpolate[i] = 1.0;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
document.getElementById("invertZAxis").addEventListener("input", (e) => {
|
|
||||||
invertZAxis = e.target.checked;
|
|
||||||
});
|
|
||||||
document.getElementById("interpolateLookAt").addEventListener("input", (e) => {
|
|
||||||
interpolateLookAt = e.target.value;
|
|
||||||
if (interpolateLookAt >= 1) {
|
|
||||||
document.getElementById("interpolateProjection").disabled = "";
|
|
||||||
} else {
|
|
||||||
document.getElementById("interpolateProjection").disabled = "yes";
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
|
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
|
||||||
displayMatricesVirtually = e.target.checked;
|
displayMatricesVirtually = e.target.checked;
|
||||||
if (!displayMatricesVirtually) {
|
|
||||||
document.getElementById("invertZAxis").checked = true;
|
|
||||||
document.getElementById("invertZAxis").disabled = true;
|
|
||||||
} else {
|
|
||||||
document.getElementById("invertZAxis").checked = invertZAxis;
|
|
||||||
document.getElementById("invertZAxis").disabled = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
document.getElementById("backfaceCulling").addEventListener("input", (e) => {
|
document.getElementById("backfaceCulling").addEventListener("input", (e) => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
|
@ -413,6 +410,7 @@ async function init() {
|
||||||
gl.enable( gl.POLYGON_SMOOTH );
|
gl.enable( gl.POLYGON_SMOOTH );
|
||||||
gl.hint( gl.LINE_SMOOTH_HINT, gl.NICEST );
|
gl.hint( gl.LINE_SMOOTH_HINT, gl.NICEST );
|
||||||
gl.hint( gl.POLYGON_SMOOTH_HINT, gl.NICEST )
|
gl.hint( gl.POLYGON_SMOOTH_HINT, gl.NICEST )
|
||||||
|
gl.lineWidth(3.0);
|
||||||
|
|
||||||
// start drawing
|
// start drawing
|
||||||
requestAnimationFrame(draw);
|
requestAnimationFrame(draw);
|
||||||
|
@ -483,7 +481,7 @@ async function draw() {
|
||||||
|
|
||||||
// Real Matrices
|
// Real Matrices
|
||||||
let realProjectionMatrix = [];
|
let realProjectionMatrix = [];
|
||||||
mat4BuildPerspective(realProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 30);
|
mat4BuildPerspective(realProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 30);
|
||||||
|
|
||||||
let realViewMatrix = [];
|
let realViewMatrix = [];
|
||||||
let realCameraPosition = [Math.cos(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch), Math.sin(cameraPitch) * smoothCameraDistance, Math.sin(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch)];
|
let realCameraPosition = [Math.cos(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch), Math.sin(cameraPitch) * smoothCameraDistance, Math.sin(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch)];
|
||||||
|
@ -509,7 +507,7 @@ async function draw() {
|
||||||
|
|
||||||
|
|
||||||
let virtualProjectionMatrix = [];
|
let virtualProjectionMatrix = [];
|
||||||
mat4BuildPerspective(virtualProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
||||||
|
|
||||||
if (!invertZAxis) {
|
if (!invertZAxis) {
|
||||||
let zAxisFlipMatrix = [];
|
let zAxisFlipMatrix = [];
|
||||||
|
@ -531,8 +529,34 @@ async function draw() {
|
||||||
let inverseVirtualViewMatrix = [];
|
let inverseVirtualViewMatrix = [];
|
||||||
mat4Inverse(inverseVirtualViewMatrix, virtualViewMatrix);
|
mat4Inverse(inverseVirtualViewMatrix, virtualViewMatrix);
|
||||||
|
|
||||||
mat4Interpolate(virtualProjectionMatrix, identity, virtualProjectionMatrix, interpolateProjection);
|
// interpolated view matrix
|
||||||
mat4Interpolate(virtualViewMatrix, identity, virtualViewMatrix, interpolateLookAt);
|
let virtualViewMatrix1 = [];
|
||||||
|
mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
|
||||||
|
mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]);
|
||||||
|
|
||||||
|
let virtualViewMatrix2 = [];
|
||||||
|
mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
|
||||||
|
mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]);
|
||||||
|
|
||||||
|
mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1);
|
||||||
|
|
||||||
|
// interpolated projection matrix
|
||||||
|
let virtualProjectionMatrix1 = [];
|
||||||
|
mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
||||||
|
mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]);
|
||||||
|
|
||||||
|
let virtualProjectionMatrix2 = [];
|
||||||
|
mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
||||||
|
mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, interpolate[3]);
|
||||||
|
|
||||||
|
let virtualProjectionMatrix3 = [];
|
||||||
|
mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
||||||
|
mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, interpolate[4]);
|
||||||
|
|
||||||
|
mat4Identity(virtualProjectionMatrix);
|
||||||
|
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix3);
|
||||||
|
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix2);
|
||||||
|
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix1);
|
||||||
|
|
||||||
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix));
|
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix));
|
||||||
|
|
||||||
|
@ -600,7 +624,7 @@ async function draw() {
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
|
||||||
setAttribPointers();
|
setAttribPointers();
|
||||||
if (displayMatricesVirtually && interpolateProjection <= 0) {
|
if (displayMatricesVirtually && t <= 2.0) {
|
||||||
gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
|
gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -619,8 +643,11 @@ async function draw() {
|
||||||
|
|
||||||
|
|
||||||
// draw origin
|
// draw origin
|
||||||
|
let originMatrix = [];
|
||||||
|
mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
|
||||||
|
mat4Interpolate(originMatrix, identity, originMatrix, interpolate[5]);
|
||||||
|
|
||||||
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(identity));
|
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix));
|
||||||
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity));
|
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity));
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
|
||||||
|
@ -629,7 +656,7 @@ async function draw() {
|
||||||
|
|
||||||
// draw origin cube
|
// draw origin cube
|
||||||
|
|
||||||
if (interpolateProjection < 1 && interpolateLookAt > 0) {
|
if (t != 0.0 && t < 5.0) {
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
|
||||||
setAttribPointers();
|
setAttribPointers();
|
||||||
gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);
|
gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);
|
||||||
|
|
Loading…
Reference in New Issue