{"componentChunkName":"component---src-templates-case-study-js","path":"/case-studies/shader-expo","result":{"data":{"markdownRemark":{"id":"22384070-3ef5-5b29-8443-6fc146642d9d","html":"

WebGL Shader Playground.

\n

Features

\n\n

I made shader expo because I wanted to learn WebGL Shaders quickly and to understand how WebGL handles shaders at the runtime.\nThe most critical part of Webgl is setting up the boilerplate for all the code.

\n

Shader Class

\n

I created this modular shader class to handle, update, compile the Fragment, and Vertex shaders.\nIt holds the WebGL Program, fragmentShader and VertexShader source String and shaders itself, and Errors of each shader.

\n
class Shader {\n  constructor(gl, vShader, fShader) {\n    this.gl = gl\n    this.vShader = vShader\n    this.fShader = fShader\n\n    this.vertexShader = null\n    this.fragmentShader = null\n\n    this.uniforms = {}\n    this.attribs = {}\n\n    this.program = null\n\n    this.isVertexShaderError = false\n    this.isFragmentShaderError = false\n    this.fragmentShaderErrors = []\n    this.vertexShaderErrors = []\n  }\n}
\n

Init Shaders

\n
\n

init code on github

\n
\n

Then I added a init method which initializes the shaders from its source and creates the program with this.createProgram method.\nIf we encounter any errors, then we will not create the program and terminate the function. We also have this.createShader() method, which creates and initialize the shader.

\n
init() {\n  this.vertexShader = this.createShader(this.gl.VERTEX_SHADER, this.vShader);\n  this.fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, this.fShader);\n\n  if (this.isFragmentShaderError) return;\n  if (this.isVertexShaderError) return;\n  this.createProgram();\n}
\n

createShader

\n
\n

createShader code on github

\n
\n

createShader method creates the WebGL shader from the source, compiles it, and checks for errors. and if we encounter any errors while compiling we set the isVertexShaderError and isFragmentShaderError to true and also sets the vertexShaderErrors, fragmentShaderErrors with the error message.

\n
createShader(type, source) {\n  const shader = this.gl.createShader(type);\n  this.gl.shaderSource(shader, source);\n  this.gl.compileShader(shader);\n  // Check For Shader Errors\n  let error = this.getShaderError(shader, source);\n  let name = (type == this.gl.VERTEX_SHADER) ? 'VERTEX_SHADER' : 'FRAGMENT_SHADER';\n\n  if (error) {\n    error.type = name;\n    if (error.type === 'VERTEX_SHADER') {\n      this.vertexShaderErrors = error;\n      this.isVertexShaderError = true;\n    } else {\n      this.fragmentShaderErrors = error;\n      this.isFragmentShaderError = true;\n    }\n    return null;\n  }\n\n  return shader;\n}
\n

createProgram

\n
\n

createProgram code on github

\n
\n

The createProgram function creates the program, attaches the shaders, links the program, and also throws errors if we encounter any Errors.\nAnd finally returns the program.

\n
createProgram() {\n  this.program = this.gl.createProgram();\n  this.gl.attachShader(this.program, this.vertexShader);\n  this.gl.attachShader(this.program, this.fragmentShader);\n  this.gl.linkProgram(this.program);\n\n  if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {\n    console.warn('Unable to initialize program ' + this.gl.getProgramInfoLog(this.program));\n    return null;\n  }\n  return this.program;\n}
\n

getShaderError

\n
\n

getShaderError code on github\nWe also have getShaderError method which is a helper method to get specific error message for specific shader, it also shows where the error happend in the source code with line number.

\n
\n
getShaderError(shader, shaderString) {\n  if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {\n    let lines = [];\n    let reg = /ERROR:\\s\\d+:(\\d+):/img;\n    let errorMsg = this.gl.getShaderInfoLog(shader);\n\n    errorMsg.replace(reg, function (match, g1, g2) {\n      lines.push((+g1));\n    });\n    let message = this.gl.getShaderInfoLog(shader);\n    message = message.split('\\n');\n    message.pop();\n\n    return {\n      msg: message,\n      line: lines\n    };\n  }\n}
\n

Other Classes

\n

Shader class was the most important for this project. We also have Camera, RawModel, Mesh classes, which handle different parts of the WebGL context.

\n
\n

see all the classes on Github

\n
\n

Setup

\n

In the end, I also used Ace library to get my code editor up and running. (which was easy)

\n
\n

see index.js setup

\n
\n

I also used some different shaders from GLSL Sandbox to check things out and see the capabilities of ShaderExpo.

","fields":{"slug":"/case-studies/shader-expo"},"frontmatter":{"demo":"//anuraghazra.github.io/ShaderExpo","iframe":"//www.youtube.com/embed/rtPhA041U4U/?modestbranding=1&showinfo=0&autohide=1&rel=0","src":"//github.com/anuraghazra/ShaderExpo","title":"ShaderExpo","info":{"idea":"The basic idea of the project was to create a real-time WebGL shader editor with linting and on the fly updates.","links":[["GLSL Sandbox","https://glslsandbox.com"],["ShaderExpo on AwesomeWebGL","https://github.com/sjfricke/awesome-webgl#glsl-editors"],["Jonas Wagner on Github from where i found some snippets","https://github.com/jwagner"]],"tech":["Javascript","HTML5 Canvas","WebGL"]}}}},"pageContext":{"slug":"/case-studies/shader-expo"}},"staticQueryHashes":["1033876704"]}