Ошибка компиляции вершинных шейдеров: ОШИБКА: 0: 1: '/': ошибка синтаксиса

Question

У меня возникают проблемы с шейдерами и я новичок в WebGL. Я искал ошибку часами и просто не могу ее найти. Я следую учебнику и сравниваю свой код с текстом учебника, он точно соответствует, и его код отлично работает в своей демонстрации, но по какой-то причине не работает на моем. Вот Javascript, который у меня есть. Ошибка, которую он производит, это «Ошибка компиляции вершинных шейдеров: ERROR: 0: 1: '/': синтаксическая ошибка» в консоли, в основном указывающая, что шейдеры не могут быть скомпилированы. Любая помощь приветствуется.

// Vertex Shader Code 
var vertexShaderText = [ 
'precision mediump float;', 
'', 
'attribute vec2 vertPosition;', 
'', 
'void main() {', 
' gl_Position = vec4(vertPosition, 0.0, 1.0);', 
'}' 
].join('/n'); 


// Fragment Shader Code 
var fragmentShaderText = [ 
'precision mediump float;', 
'', 
'void main() {', 
' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);', 
'}' 
].join('/n'); 


var initApp = function() { 

    // Check for errors 
    console.log("The app is working so far"); 

    var canvas = document.getElementById('game-canvas'); 
    var gl = canvas.getContext('webgl'); 

    if (!gl) { 
     gl = canvas.getContext('experimental-webgl'); 
    } 

    if (!gl) { 
     alert('Sorry, your web browser does not support WebGL. Please try opening this page in a different browser.'); 
    } 

    // Clear color and depth buffers and set the background window color 
    gl.clearColor(0.3, 0.7, 0.5, 0.7); 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    // Create vertex and fragment shader objects 
    var vertexShader = gl.createShader(gl.VERTEX_SHADER); 
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 

    // Load and compile shaders from code provided in 'vertexShaderText' and 'fragmentShaderText' 
    gl.shaderSource(vertexShader, vertexShaderText); 
    gl.shaderSource(fragmentShader, fragmentShaderText); 

    gl.compileShader(vertexShader); 
    gl.compileShader(fragmentShader); 

    // Check for GL compilation errors (because they often are not explicit) 
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { 
     console.error('Error compiling vertex shaders:', gl.getShaderInfoLog(vertexShader)); 
    } 
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { 
     console.error('Error compiling fragment shaders:', gl.getShaderInfoLog(fragmentShader)); 
    } 
}; 

Answer 1

Вы, вероятно, хотите [...].join('\n'), а не '[...].join('/n').

Answer 2

Что такое WaclawJasper, это правда. Я думал, что отметить, однако, что AFAICT nearly every browser that supports WebGL also supports es6 template literals означает, что вы должны быть в состоянии сделать это

var vertexShaderText = ` 
precision mediump float; 

attribute vec2 vertPosition; 

void main() { 
    gl_Position = vec4(vertPosition, 0.0, 1.0); 
} 
`; 

// Fragment Shader Code 
var fragmentShaderText = ` 
precision mediump float; 

void main() { 
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 
} 
`; 

Заметным исключением является IE11