Fix axis rendering

BZFlagCommunity · Apr 28, 2021 · a0cc70a · a0cc70a
1 parent e76f779
commit a0cc70a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/renderer/gl.ts b/src/renderer/gl.ts
@@ -39,6 +39,21 @@ void main(){
   finalColor = vColor;
 }`;
 
+export const AXIS_VERTEX_SHADER = `#version 300 es
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec4 color;
+
+out vec4 vColor;
+
+uniform mat4 proj;
+uniform mat4 view;
+uniform mat4 model;
+
+void main(){
+  vColor = color;
+  gl_Position = proj * view * model * vec4(position, 1.0);
+}`;
+
 export function createShader(gl: WebGL2RenderingContext , vertCode: string, fragCode: string): WebGLProgram | null{
   const vertShader = gl.createShader(gl.VERTEX_SHADER);
   if(!vertShader){

diff --git a/src/renderer/mod.ts b/src/renderer/mod.ts
@@ -1,4 +1,4 @@
-import {VERTEX_SHADER, FRAGMENT_SHADER, createShader} from "./gl.ts";
+import {VERTEX_SHADER, FRAGMENT_SHADER, AXIS_VERTEX_SHADER, createShader} from "./gl.ts";
 
 import * as math from "../math.ts";
 import {getCoord} from "../utils.ts";
@@ -8,7 +8,7 @@ import * as dom from "../dom.ts";
 const MAX_ZOOM = -5;
 const MOUSE_SPEED = 75;
 const NEAR_PLANE = 1;
-const AXIS_LINE_LENGTH = 20;
+const AXIS_LINE_LENGTH = 30;
 
 export class Renderer{
   worldSize = 400;
@@ -101,15 +101,20 @@ export class Renderer{
     }, {passive: true});
 
     const shader = createShader(this.gl, VERTEX_SHADER, FRAGMENT_SHADER);
-    if(!shader){
+    const axisShader = createShader(this.gl, AXIS_VERTEX_SHADER, FRAGMENT_SHADER);
+    if(!shader || !axisShader){
       alert("Error creating shader");
       return;
     }
-    this.gl.useProgram(shader);
 
+    this.gl.useProgram(shader);
     const vMatrix = this.gl.getUniformLocation(shader, "view");
     const mMatrix = this.gl.getUniformLocation(shader, "model");
 
+    this.gl.useProgram(axisShader);
+    const avMatrix = this.gl.getUniformLocation(axisShader, "view");
+    const amMatrix = this.gl.getUniformLocation(axisShader, "model");
+
     const axisVertices = [
       // x
       0, 0, 0,
@@ -183,15 +188,20 @@ export class Renderer{
 
       this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
       this.gl.viewport(0, 0, canvas.width, canvas.height);
-      this.gl.uniformMatrix4fv(this.gl.getUniformLocation(shader, "proj"), false, math.getProjection(60, canvas.width/canvas.height, NEAR_PLANE, this.worldSize * 5));
 
+      this.gl.useProgram(shader);
+      this.gl.uniformMatrix4fv(this.gl.getUniformLocation(shader, "proj"), false, math.getProjection(60, canvas.width/canvas.height, NEAR_PLANE, this.worldSize * 5));
       this.gl.uniformMatrix4fv(vMatrix, false, viewMatrix);
       this.gl.uniformMatrix4fv(mMatrix, false, modelMatrix);
 
       this.gl.drawElements(this.gl.TRIANGLES, this.elementCount, this.gl.UNSIGNED_SHORT, 0);
 
       if(dom.settings.showAxis.checked){
-        this.gl.uniformMatrix4fv(mMatrix, false, math.multiplyArrayOfMatrices([
+        this.gl.useProgram(axisShader);
+        this.gl.uniformMatrix4fv(this.gl.getUniformLocation(axisShader, "proj"), false, math.getProjection(60, canvas.width/canvas.height, NEAR_PLANE, this.worldSize * 5));
+        this.gl.uniformMatrix4fv(avMatrix, false, viewMatrix);
+
+        this.gl.uniformMatrix4fv(amMatrix, false, math.multiplyArrayOfMatrices([
           modelMatrix,
           [AXIS_LINE_LENGTH,0,0,0, 0,AXIS_LINE_LENGTH,0,0, 0,0,AXIS_LINE_LENGTH,0, this.axisPosition[0],this.axisPosition[2],-this.axisPosition[1],1]
         ]));