shader attribute

index.css

@@ -1,13 +1,14 @@
-html{
+html, body{
     width: 100%;
     height: 100%;
-}
-body{
     margin: 0;
     padding: 0;
+}
+body{
     background:  rgba(0, 0, 0, 0) linear-gradient(rgb(56, 56, 56), rgb(122, 122, 122)) repeat scroll 0% 0%;
 }
 #canvas{
-    width: 100%;
-    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
 }

index.ts

@@ -1,4 +1,9 @@
 /// <reference path="node_modules/webgl-strict-types/index.d.ts" />
+import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util";
+
+/// <reference path="./src/glsl.d.ts" />
+import vert_src from "./src/vertex.vert";
+import frag_src from "./src/fragment.frag";
 
 function main(){
     const canvas = document.querySelector("canvas");
@@ -6,11 +11,24 @@ function main(){
         console.error("couldn't find canvas");
         return;
     }
-    let gl = canvas.getContext("webgl2");
+    let gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null;
     if(gl === null){
         console.error("webgl2 is not supported!");
         return;
     }
+    try{
+        const program = createProgramFromSource(gl,vert_src,frag_src);
+        gl.useProgram(program);
+    }
+    catch(e){
+        if(e instanceof ShaderError){
+            console.error(e.message,e.getShaderInfoLog(gl));
+        }
+        else if(e instanceof ProgramError){
+            console.error(e.message,e.getProgramInfoLog(gl));
+        }
+        throw e;
+    }
     const position = [
         -0.5,-0.5,
         0.0,0.5,
@@ -18,6 +36,11 @@ function main(){
     ];
     let positionBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
+
+    gl.enableVertexAttribArray(0);
+    
+    gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
+
     const floatPosition = new Float32Array(position);
     gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
     gl.drawArrays(gl.TRIANGLES,0,3);

package.json

@@ -13,6 +13,8 @@
     "parcel-bundler": "^1.12.5"
   },
   "devDependencies": {
+    "glslify-bundle": "^5.1.1",
+    "glslify-deps": "^1.3.2",
     "typescript": "^4.4.2",
     "webgl-strict-types": "^1.0.4"
   }

src/fragment.frag

@@ -0,0 +1,7 @@
+#version 300 es
+precision highp float;
+layout(location=0) out vec4 outColor;
+
+void main() {
+  outColor = vec4(0.0,0.0,1.0,1.0);
+}

src/gl_util.ts

@@ -0,0 +1,57 @@
+import GL = WebGLRenderingContextStrict;
+import GL2 = WebGL2RenderingContextStrict;
+
+export class ShaderError extends Error{
+    constructor(
+        readonly shader:WebGLShader
+        ,msg?:string){
+            super(msg);
+    }
+    getShaderInfoLog(gl:GL2){
+        return gl.getShaderInfoLog(this.shader);
+    }
+}
+
+export class ProgramError extends Error{
+    constructor(
+        readonly program:WebGLProgram
+        ,msg?:string){
+            super(msg);
+    }
+    getProgramInfoLog(gl:GL2){
+        return gl.getProgramInfoLog(this.program);
+    }
+}
+
+/***
+ * compile shader
+ */
+export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGLShader{
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader,source);
+    gl.compileShader(shader);
+    const status = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
+    if(!status){
+        throw new ShaderError(shader,"Could not compile shader!");
+    }
+    return shader;
+}
+
+export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){
+    const program = gl.createProgram();
+    gl.attachShader(program,vertex);
+    gl.attachShader(program,frag);
+
+    gl.linkProgram(program);
+
+    const status = gl.getProgramParameter(program,gl.LINK_STATUS);
+    if(!status){
+        throw new ProgramError(program,"Coudl not link program!");
+    }
+    return program;
+}
+export function createProgramFromSource(gl:GL2, vert:string,frag:string){
+    const vert_shader = compileShader(gl,vert,gl.VERTEX_SHADER);
+    const frag_shader = compileShader(gl,frag,gl.FRAGMENT_SHADER);
+    return createProgram(gl,vert_shader,frag_shader);
+}

src/glsl.d.ts

@@ -0,0 +1,12 @@
+declare module '*.glsl' {
+    const value: string
+    export default value
+}
+declare module '*.frag' {
+    const value: string
+    export default value
+}
+declare module '*.vert' {
+    const value: string
+    export default value
+}

src/vertex.vert

@@ -0,0 +1,6 @@
+#version 300 es
+layout(location=0) in vec4 pos;
+
+void main() {
+  gl_Position = pos;
+}