Fehler beim Kompilieren von Vertex-Shadern: ERROR: 0: 1: '/': Syntaxfehler

Question

Ich habe Probleme mit Shadern und bin neu bei WebGL. Ich habe stundenlang nach dem Fehler gesucht und kann ihn nicht finden. Ich folge einem Tutorial und verglich meinen Code mit dem des Tutorialautors, es passt genau, und sein Code läuft gut in seiner Demo, aber aus irgendeinem Grund läuft er nicht auf meinem. Hier ist das Javascript, das ich habe. Der Fehler, den es erzeugt, ist "Fehler beim Kompilieren von Vertex-Shadern: ERROR: 0: 1: '/': Syntaxfehler" in der Konsole, was im Wesentlichen anzeigt, dass die Shader nicht kompiliert werden können. Jede Hilfe würde sehr geschätzt werden.

// 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

Sie wollen wahrscheinlich [...].join('\n') statt '[...].join('/n').

Answer 2

Was WaclawJasper sagte, ist wahr. Ich dachte, ich darauf hinweisen, würde aber, dass AFAICT nearly every browser that supports WebGL also supports es6 template literals was bedeutet, sollten Sie in der Lage sein, diese

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); 
} 
`; 

Die bemerkenswerte Ausnahme zu tun IE11 ist