diff options
[WGL/P] Added semi-working keyboard navigation and toyed around with shaders
1 files changed, 77 insertions, 7 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/Project/Project.html | 84 |
diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html index a9e1d66..627e21a 100644 --- a/Year 2/Computer Graphics with WebGL/Project/Project.html +++ b/Year 2/Computer Graphics with WebGL/Project/Project.html @@ -8,16 +8,71 @@ <script src="shaders.js"></script>
<style>
+body {
+ padding: 0;
+}
canvas {
display: block;
position: fixed;
- border: 1px solid black;
- width: calc(100vw - 18px);
- height: calc(100vh - 18px);
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100vh;
+ /* cursor: none; */
}
</style>
<script>
+ /*
+ * Keyboard navigation
+ */
+
+ const MOVE_SPEED = 0.1;
+ const ROTATION_SPEED = 0.05;
+
+ var position = [10, 0, 3];
+ var lookingVec = [-MOVE_SPEED,0,-0.02];
+ var movementVec = [0,0,0];
+
+ function vecSum(a, b) {
+ return [a[0]+b[0], a[1]+b[1], a[2]+b[2]];
+ }
+ function vecSub(a, b) {
+ return [a[0]-b[0], a[1]-b[1], a[2]-b[2]];
+ }
+
+ addEventListener("keydown", (event) => {
+ switch (event.key) {
+ case 'ArrowUp':
+ case 'w':
+ position = vecSum(position, lookingVec);
+ break;
+ case 'ArrowDown':
+ case 's':
+ position = vecSub(position, lookingVec);
+ break;
+ case 'ArrowLeft':
+ case 'a':
+ position = [0,-MOVE_SPEED,0];
+ break;
+ case 'ArrowRight':
+ case 'd':
+ position = [0,MOVE_SPEED,0];
+ break;
+ }
+ });
+
+ addEventListener("mousemove", (event) => {
+ var screenCenterX = document.body.clientWidth / 2;
+ var screenCenterY = document.body.clientHeight / 2;
+
+ // lookingVec = [];
+ });
+
+ /*
+ * WebGL
+ */
+
function start()
{
var canvas = document.getElementById("picasso");
@@ -35,6 +90,12 @@ canvas { gl.enable(gl.DEPTH_TEST);
gl.clearColor(1,1,1,1);
+ // For proper transparency
+ gl.enable(gl.BLEND);
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+ // Black Hole variables
+ gl.vertexAttrib1f(aBH, 0);
identity();
perspective(30,gl.canvas.width/gl.canvas.height,1,40000);
@@ -45,18 +106,26 @@ canvas { gl.uniform3f(uLightDir,0,0,-1);
blackHole = new BlackHole([0,0,0], 1);
- planet1 = new Sphere([-5,0,0], 0.5);
- planet1.color = [1,0,0];
+ planets = [new Sphere([-3,0,0.5], 0.5), new Sphere([-3,0,-1.2], 0.5), new Sphere([-3,0,-2.4], 0.5)];
+ planets.forEach((p) => p.color = [1,0,0]);
resizeglcanvas();
}
BlackHole = function(center, size) {
this.sphere = new Sphere(center, size);
+ this.shwarzschildRadius = 0.5; // bad
}
BlackHole.prototype.draw = function() {
+ gl.vertexAttrib1f(aBH, 1);
+ gl.vertexAttrib1f(aSR, this.shwarzschildRadius);
+ gl.vertexAttrib1f(aR, this.sphere.size + 0.03);
+ gl.vertexAttrib3f(aBHXYZ, ...this.sphere.center);
+
this.sphere.draw();
+
+ gl.vertexAttrib1f(aBH, 0);
}
function resizeglcanvas() {
@@ -75,12 +144,13 @@ canvas { {
gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
- lookAt([10, 0, 3], [0,0,0], [0,0,1]);
+ lookAt(position, vecSum(position, lookingVec), [0,0,1]);
+ planets.forEach((p) => p.draw());
blackHole.draw();
- planet1.draw();
requestAnimationFrame(drawFrame);
}
+
</script>
</head>
|