Use a GLSL shader built in a sandbox with my WebGL code - heroku

Question

I'm very new to shaders and have modified a shader on glsl.heroku.com to suit my needs, see it here - this is what I want my 3D Object to look like: Demo. Now my question is how do I import it into my project using native webgl (View my broken code here). The shader code is as follows:
precision mediump float;
varying vec2 surfacePosition;
void main( void ) {
float intensity = 3.0; // Lower number = more 'glow'
vec3 light_color = vec3(0.4, 0.3, 0.1); // RGB, proportional values, higher increases intensity
float master_scale = 0.01; // Change the size of the effect
float c = master_scale/(length(surfacePosition) * length(surfacePosition));
gl_FragColor = vec4(vec3(pow(c, intensity))*light_color, 1.0);
}
That's the fragment shader, so how do I build the correct vertex shader to go with it and pass through the surfacePosition variable (and what is the surface position variable???) using my broken code in the link above.

Answer 1

Without looking at the source I'm going to guess surfacePosition is just the vertex position * some matrix.
Vertex shader
attribute vec4 a_position;
varying vec2 surfacePosition;
uniform mat4 mat;
void main() {
gl_Position = a_position;
surfacePosition = (a_position * mat).xy;
}
setup
var verts = [
1, 1,
-1, 1,
-1, -1,
1, 1,
-1, -1,
1, -1,
];
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
...
var loc = gl.getUniformLocation(program, "mat");
var mat = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
];
mat[5] = canvas.height/canvas.width;
gl.uniformMatrix4fv(loc, false, mat);
gl.drawArrays(gl.TRIANGLES, 0, 6);
The matrix lets you adjust the rendering aspect based on the size of the canvas as well as implement pan and zoom. See this article.
here's a snippet
var countElem = document.getElementById("t");
var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl");
var program = twgl.createProgramFromScripts(
gl, ["vshader", "fshader"], ["a_position"]);
gl.useProgram(program);
var verts = [
1, 1,
-1, 1,
-1, -1,
1, 1,
-1, -1,
1, -1,
];
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
var loc = gl.getUniformLocation(program, "mat");
var mat = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
];
// index 0 = x scale (ie, aspect & zoom)
// index 5 = y scale (ie, aspect & zoom)
// index 12 = x offset (pan x)
// index 13 = y offset (pan y)
mat[5] = canvas.height/canvas.width;
gl.uniformMatrix4fv(loc, false, mat);
gl.drawArrays(gl.TRIANGLES, 0, 6);
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<script id="vshader" type="whatever">
attribute vec4 a_position;
varying vec2 surfacePosition;
uniform mat4 mat;
void main() {
gl_Position = a_position;
surfacePosition = (a_position * mat).xy;
}
</script>
<script id="fshader" type="whatever">
precision mediump float;
varying vec2 surfacePosition;
void main() {
float intensity = 3.0; // Lower number = more 'glow'
vec3 light_color = vec3(0.4, 0.3, 0.1); // RGB, proportional values, higher increases intensity
float master_scale = 0.01; // Change the size of the effect
float c = master_scale/(length(surfacePosition) * length(surfacePosition));
gl_FragColor = vec4(vec3(pow(c, intensity))*light_color, 1.0);
}
</script>
<canvas id="c"></canvas>