頂点シェーダのコンパイルエラー：エラー：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が言ったことは本当です。私はあなたがこの

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

注目すべき例外を行うことができるはずということAFAICT nearly every browser that supports WebGL also supports es6 template literalsが IE11

ですが、私が指摘したいと思いました