Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Moved gl shaders out into seperate files, loaded dynamically.

  • Loading branch information...
commit 08a75442641c77c7baf55e5edb225e948b1556e3 1 parent d2d8771
@nicokruger authored
View
12 src/main/javascript/data/shaders/fs.html
@@ -0,0 +1,12 @@
+<script type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+varying vec2 vTextureCoord;
+uniform sampler2D uSampler;
+
+void main(void) {
+ gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+}
+</script>
View
14 src/main/javascript/data/shaders/vs.html
@@ -0,0 +1,14 @@
+<script type="x-shader/x-vertex">
+attribute vec3 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+
+varying vec2 vTextureCoord;
+
+void main(void) {
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ vTextureCoord = aTextureCoord;
+}
+</script>
View
32 src/main/javascript/index.html
@@ -15,37 +15,7 @@
margin-right: auto;
}
</style>
-
- <script id="shader-fs" type="x-shader/x-fragment">
- #ifdef GL_ES
- precision highp float;
- #endif
-
- varying vec2 vTextureCoord;
-
- uniform sampler2D uSampler;
-
- void main(void) {
- gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
- }
- </script>
-
- <script id="shader-vs" type="x-shader/x-vertex">
- attribute vec3 aVertexPosition;
- attribute vec2 aTextureCoord;
-
- uniform mat4 uMVMatrix;
- uniform mat4 uPMatrix;
-
- varying vec2 vTextureCoord;
-
-
- void main(void) {
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
- vTextureCoord = aTextureCoord;
- }
- </script>
-
+
</head>
<body style="color: #ffffff; background-color: #000000">
<div>
View
164 src/main/javascript/renderlib/renderutil_gl.js
@@ -1,5 +1,5 @@
-renderutil_gl = function(gl) {
+renderutil_gl = function(gl, shaders) {
var shaderProgram;
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
@@ -8,18 +8,87 @@ renderutil_gl = function(gl) {
var cubeVertexTextureCoordBuffer;
var cubeVertexIndexBuffer;
var neheTexture;
+ var shader_map = {};
+
+
+ var module = {
+
+ drawScene: function() {
+ gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ //mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
+ mat4.ortho(0, 1024, 0, 1024, 0.1, 100.0, pMatrix)
+ mat4.identity(mvMatrix);
+ mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+ gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+ gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
- __init_gl = function() {
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, neheTexture);
+ gl.uniform1i(shaderProgram.samplerUniform, 0);
+
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+ this.setMatrixUniforms();
+ gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
+ },
+
+ mvPushMatrix: function() {
+ var copy = mat4.create();
+ mat4.set(mvMatrix, copy);
+ mvMatrixStack.push(copy);
+ },
+
+ mvPopMatrix: function() {
+ if (mvMatrixStack.length == 0) {
+ throw "Invalid popMatrix!";
+ }
+ mvMatrix = mvMatrixStack.pop();
+ },
+
+ setMatrixUniforms: function() {
+ gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
+ gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
+ }
+
+
+
+ }
+
+ // TODO: function is WAY too long, REFACTOR
+ __init_gl = function() {
//
// SECTION: init shaders
//
- var fragmentShader = this.getShader("shader-fs");
- var vertexShader = this.getShader("shader-vs");
-
shaderProgram = gl.createProgram();
- gl.attachShader(shaderProgram, vertexShader);
- gl.attachShader(shaderProgram, fragmentShader);
+
+ for (var shader in shaders) {
+ var type = shaders[shader].type;
+ var script = shaders[shader].script;
+ var shader;
+ if (type == "x-shader/x-fragment") {
+ shader = gl.createShader(gl.FRAGMENT_SHADER);
+ } else if (type == "x-shader/x-vertex") {
+ shader = gl.createShader(gl.VERTEX_SHADER);
+ } else {
+ alert("invalid shader type: " + type);
+ }
+
+ gl.shaderSource(shader, script);
+ gl.compileShader(shader);
+
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ alert(gl.getShaderInfoLog(shader));
+ return null;
+ }
+
+ gl.attachShader(shaderProgram, shader);
+ }
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
@@ -95,88 +164,7 @@ renderutil_gl = function(gl) {
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
}
-
- var module = {
- getShader: function(id) {
- var shaderScript = document.getElementById(id);
-
- if (!shaderScript) {
- return null;
- }
-
- var str = "";
- var k = shaderScript.firstChild;
- while (k) {
- if (k.nodeType == 3) {
- str += k.textContent;
- }
- k = k.nextSibling;
- }
-
- var shader;
- if (shaderScript.type == "x-shader/x-fragment") {
- shader = gl.createShader(gl.FRAGMENT_SHADER);
- } else if (shaderScript.type == "x-shader/x-vertex") {
- shader = gl.createShader(gl.VERTEX_SHADER);
- } else {
- return null;
- }
-
- gl.shaderSource(shader, str);
- gl.compileShader(shader);
-
- if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
- alert(gl.getShaderInfoLog(shader));
- return null;
- }
-
- return shader;
- },
-
- mvPushMatrix: function() {
- var copy = mat4.create();
- mat4.set(mvMatrix, copy);
- mvMatrixStack.push(copy);
- },
- mvPopMatrix: function() {
- if (mvMatrixStack.length == 0) {
- throw "Invalid popMatrix!";
- }
- mvMatrix = mvMatrixStack.pop();
- },
-
- setMatrixUniforms: function() {
- gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
- gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
- },
-
- drawScene: function() {
- gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- //mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
- mat4.ortho(0, 1024, 0, 1024, 0.1, 100.0, pMatrix)
- mat4.identity(mvMatrix);
- mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
- gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
- gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
-
- gl.activeTexture(gl.TEXTURE0);
- gl.bindTexture(gl.TEXTURE_2D, neheTexture);
- gl.uniform1i(shaderProgram.samplerUniform, 0);
-
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
- this.setMatrixUniforms();
- gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
- }
-
- }
-
//__init_gl(gl);
_.bind(__init_gl, module)();
View
47 src/main/javascript/renderlib/screens/gl.js
@@ -3,9 +3,9 @@ if (!screens) screens = {}; // initialise the top-level module if it does not ex
screens.gl = function(game,width,height) {
$("#gamescreenarea").append("<canvas id=\"canvasgl\" width=\"" + width + "\" height=\"" + height + "\" />");
-
var canvas = $("#canvasgl")[0];
+ // attempt to instantiate webgl
var gl;
try {
gl = canvas.getContext("experimental-webgl");
@@ -17,8 +17,15 @@ screens.gl = function(game,width,height) {
alert("Could not initialise WebGL, sorry :-(");
}
- var glutil = renderutil_gl(gl);
-
+ // Load the shaders
+ var glutil = {};
+ var shaderloader = screens.gl.shaderloader({vs: "data/shaders/vs.html", fs: "data/shaders/fs.html" }, function(shaders) {
+ console.log("SHADERS LOADED");
+ glutil.util = renderutil_gl(gl, shaders);
+ });
+ //var glutil = renderutil_gl(gl);
+
+ // Temporary canvas for background image
var tmpctx = document.createElement("canvas").getContext("2d");
tmpctx.canvas.width = width + 1;
tmpctx.canvas.height = height + 1;
@@ -32,11 +39,41 @@ screens.gl = function(game,width,height) {
create: function(sectors, x1, y1, x2, y2) {
return {
draw: function() {
+ if (!shaderloader.ready()) {
+ console.log("shaderloader not ready... not drawing");
+ return;
+ }
+
Timer.start("gl");
- glutil.drawScene();
+ glutil.util.drawScene();
Timer.end();
}
}
}
}
-}
+}
+
+screens.gl.shaderloader = function(shader_map, callback) {
+ var unloaded = 0;
+ var shaders = {};
+ var store = function(shader) {
+ return function (data) {
+ console.log("shader: " + shader);
+ shaders[shader] = {type: $(data).attr("type"), script: $(data).text()};
+ unloaded--;
+
+ if (unloaded == 0) {
+ callback && callback(shaders);
+ }
+ }
+ }
+ for (var shader in shader_map) {
+ console.log("fetching shader: " + shader_map[shader]);
+ unloaded++;
+ $.get(shader_map[shader], store(shader));
+ }
+
+ return {
+ ready: function() { return unloaded == 0; },
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.