How to send multiple parameters to the vertex shader on WebGL?

Question

I'm following a tutorial on OpenGL (because WebGL tutorials are rare), where it uses the following syntax for multiple parameteres:

#version 330

layout (location = 0) in vec4 position;
layout (location = 1) in vec4 color;

smooth out vec4 theColor;

void main()
{
    gl_Position = position;
    theColor = color;
}

But the layout (location = #) syntax doesn't work on WebGL. What is the substitute for this?

Answer 1

There are a number of things wrong with this shader if you intend to use it in WebGL.

For starters, WebGL is based on OpenGL ES 2.0, which uses a version of GLSL derived from 120.

Your #version directive is invalid for WebGL; you cannot use in, out, or smooth for vertex attributes or varying variables; there is no layout qualifier.

This will get you part of the way to fixing your shader:

#version 100

attribute vec4 position;
attribute vec4 color;

varying vec4 theColor;

void main()
{
    gl_Position = position;
    theColor    = color;
}

But you will also need to bind the attribute locations for position and color in your code (before linking your shaders - see glBindAttribLocation (...)). If you are having difficulty finding tutorials for WebGL / ESSL, you can re-use many OpenGL tutorials that were written for GLSL version 120 or older.

You can read the offical specification for OpenGL ES 2.0's GLSL (ESSL) here. At the very least, have a look at the introductory section because it contains a lot of useful information.