WebGL shader program - no getAttribLocation function

Question

I'm learning WebGL following a tutorial in the WebGL Programming Guide text. I'm stuck trying to retrieve an attribute location from a vertex shader program.

I created a class to encapsulate WebGL functions. I load the WebGL program with:

// load shaders into WebGL:
  loadShaders(vertexName, fragmentName) {
    const vertexShader = this.loadShaderCode(vertexName, this.gl.VERTEX_SHADER);
    const fragmentShader = this.loadShaderCode(fragmentName, this.gl.FRAGMENT_SHADER);
    const shaderProgram = this.gl.createProgram();
    this.gl.attachShader(shaderProgram, vertexShader);
    this.gl.attachShader(shaderProgram, fragmentShader);
    this.gl.linkProgram(shaderProgram);
    if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) {
      console.log(`Error initializeing shader program:\n  ${this.gl.getProgramInfoLog(shaderProgram)}`);
      return null; }
    console.log('Attached and linked shaders');
    return shaderProgram;
  } // loadShaders

The individual shaders are loaded with:

loadShaderCode(shaderName, shaderType) {
    const fileName = `sources/${shaderName}.glsl`;
    const sourceCode = loadFile(fileName);
    if (!sourceCode) {
      console.log(`Error loading shader source code:\n  File: ${fileName}`)
      return null;
    }
    const shader = this.gl.createShader(shaderType);
    this.gl.shaderSource(shader, sourceCode);
    this.gl.compileShader(shader);
    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
      console.log(`Error loading ${shaderName}:\n  File: ${fileName}\n  ${this.gl.getShaderInfoLog(shader)}`);
      this.gl.deleteShader(shader);
      return null; }
    console.log(`Loaded shader ${shaderName} from ${fileName}`);
    return shader;

The vertex shader is:

attribute vec4 a_position;
void main() {
  gl_Position = a_position;
  gl_PointSize = 10.0;
}

Neither loadShaderCode or loadShaders return any errors when executed. The resulting glm.program variable shows as a WebGLProgram type in the browser debug console. When I execute:

a_Position = glm.program.getAttribLocation(glm.program, 'a_position');

I receive: TypeError: glm.program.getAttribLocation is not a function.

I'm new to the WebGL world and am stuck on this. Any advice would be much appreciated!

Answer 1

getAttribLocation is a member function of the WebGLContext not the WebGLShaderProgram. None of the returned objects of the WebGL API have any member functions, they're solely used for typing.