Incorrect documentation on how to fix missing glsl string template tag?

[control-flow]

The documentation says a missing glsl tag can be fixed by using

const glsl = x => x;

According to the documentation of string template tags it should be

const glsl = x => x[0];

which is then finally working in my build.

Did I miss something here or is the documentation incorrect?

[siddris14]

Hey!

Thank you very much for this. It was very helpful.

Much appreciated!

[roninbar]

It's better to use

const glsl = String.raw;

because it interpolates expressions surrounded by ${}, allowing you to write code like the following:

  const U_MODEL_MATRIX = 'uModelMatrix';
  const U_VIEW_MATRIX = 'uViewMatrix';
  const U_PROJECTION_MATRIX = 'uProjectionMatrix';
  const A_POSITION = 'aPosition';
  const A_COLOR = 'aColor';
  const V_COLOR = 'vColor';

  const vsSource = glsl`
    // Attributes
    attribute vec4 ${A_POSITION};
    attribute vec4 ${A_COLOR};
    // Uniforms
    uniform mat4 ${U_MODEL_MATRIX};
    uniform mat4 ${U_VIEW_MATRIX};
    uniform mat4 ${U_PROJECTION_MATRIX};
    // Varyings
    varying lowp vec4 ${V_COLOR};
    // Program
    void main(void) {
      gl_Position = ${U_PROJECTION_MATRIX} * ${U_VIEW_MATRIX} * ${U_MODEL_MATRIX} * ${A_POSITION};
      ${V_COLOR} = ${A_COLOR};
    }
  `;

  const fsSource = glsl`
    // Varyings
    varying lowp vec4 ${V_COLOR};
    // Program
    void main(void) {
      gl_FragColor = ${V_COLOR};
    }
  `;

  const program = buildProgram(gl, vsSource, fsSource);

  return {
    program,
    attribs: {
      position: gl.getAttribLocation(program, A_POSITION),
      color: gl.getAttribLocation(program, A_COLOR),
    },
    uniforms: {
      modelMatrix: getUniformLocation(gl, program, U_MODEL_MATRIX),
      viewMatrix: getUniformLocation(gl, program, U_VIEW_MATRIX),
      projectionMatrix: getUniformLocation(gl, program, U_PROJECTION_MATRIX),
    },
  };