WebGL shader program management

I'm writing a tiny WebGL/JS framework to improve my knowledge of JavaScript and WebGL. Following is a class that wraps a Shader Program and provides methods for setting the shader parameters (AKA uniform variables):

ShaderProgram class:

```
"use strict";

/*
===========================================================
ShaderProgram class:
===========================================================
*/
function ShaderProgram(progName) {
this.detail = {
gl : Renderer.getWebGLContext(),
webGLProgramObj : null, // WebGLProgram.
vertexAttribs : null, // Map of { name: string, index: int } for each vertex attribute.
uniformVars : null, // Map of uniform var locations, indexed by var name.
name : progName || "unnamed" // Optional name/id string used for debugging.
};
};

/*
* ---- Methods of ShaderProgram: ----
*/

ShaderProgram.createShaderFromHtmlElement = function (shaderElementId) { // -> WebGLShader ['static' method]
console.assert(shaderElementId, "Provide a valid HTML element id!");

// Get shader text source element:
var shaderScript = document.getElementById(shaderElementId);
if (!shaderScript) {
console.error("Unable to find shader element for id '" + shaderElementId + "'!");
return null;
}

// Grab the GLSL source code:
var shaderSourceText = "";
var domNode = shaderScript.firstChild;
while (domNode) {
// NOTE: nodeType == 3 indicates a TEXT mode, which is what we want.
// See http://www.w3schools.com/jsref/prop_node_nodetype.asp
// for a list of all node types.
if (domNode.nodeType == 3) {
shaderSourceText += domNode.textContent;
}
domNode = domNode.nextSibling;
}

var gl = Renderer.getWebGLContext();

// Created WebGL shader object:
//
// (Note that the 'x-shader' type is a user defined value.
// It could be any arbitrary string that does not confl

Since I'm not a JS guru or anything, I'm going to give more of a style review, rather than a review of the code, but if there is anything I see, I'll try to point it out.

• First off, you have some odd comments, which I assume are to describe the return values of certain functions, e.g, // -> bool. While there are many different commenting styles, the one I usually use the most is JSDoc. Here's an example usage of JSDoc.

/**
 * A simple AND gate.
 * @param {bool} port1 - The first input port.
 * @param {bool} port2 - The second input port.
 * @returns {bool}
 */
function ANDGate(port1, port2) {
    return port1 && port2;
}

• This comment may or may not have a strange structure, but I'll break it down for you. At the top of the comment, is a small description of what the function or constructor does, then, if there are any parameters, use @param {type} name - Description. If you're documenting a constructor, then just add @constructor underneath it's primary description. Here's a template that you can reference if you forget. Do take note though, use the style of comment with the two leading asterisks, /** ... /, not / ... /*.

/**
 * Description of method here
 * ...
 * @param {type} name - Description here ...
 * ...
 * @returns {type}
 */
function myMethod(params) {
    ...
}

/**
 * Description of constructor here
 * ...
 * @constructor
 * @param {type} name - Description here ...
 * ...
 */
function MyConstructor(params) {
    ...
}

-
Another thing, while it's not much of an issue in this code, is just to give variables slightly better names, as @skiwi mentioned in chat.. It's not necessary to drop vowels from names as short as shader.

-
Also, for the sake of some users, I'd also use the alert() function, in addition to using console.something to warn of an error or such. This is simply for users who might not have access to the console, don't know how to get it, or don't know what it does.

-
Finally, I'd just add some more empty lines in there, just to improve the readability. While this isn't necessarily part of an "official style guide" or anything, I just find that it's generally easier to read. I usually just have two empty lines in between methods and constructors, and then inside of those methods, I separate different sections by one line.

Anyways, I hope this helped, even if I couldn't give a full review on the WebGL stuff itself! :)

StackExchange Code Review Q#88391, answer score: 8