Как правильно подключить шейдер в webGL

Question

Я создаю webGL и пытаюсь добавить в него шейдер по примеру. webGL создаётся, но шейдер в нём не выводится. Как это правильно сделать? Вот мой код:

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src="glUtils.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body onload="start()">
   <canvas id="glcanvas" width="640" height="480">
     <script id="shader-fs" type="x-shader/x-fragment">
      void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
     </script>
   </canvas>
</body>
</html>

glUtils.js:

var gl;
function start() {
 var canvas = document.getElementById("glcanvas");
 gl = initWebGL(canvas);
 if (gl) {
  gl.clearColor(0.4, 0.5, 0.7, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

  }
}

function initWebGL(canvas) {
 gl = null;
 try {
 gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
 }
 catch(e) {}
 if (!gl) {
 alert("Невозможно инициализировать WebGL. Ваш браузер может не поддерживать это.");
 gl = null;
 }
 return gl;
}

function initShaders() {
 var fragmentShader = getShader(gl, "shader-fs");
 var vertexShader = getShader(gl, "shader-vs");

 shaderProgram = gl.createProgram();

 gl.attachShader(shaderProgram, vertexShader);
 gl.attachShader(shaderProgram, fragmentShader);
 gl.linkProgram(shaderProgram);

 if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
 alert("Unable to initialize the shader program.");
 }
 gl.useProgram(shaderProgram);
 vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
 gl.enableVertexAttribArray(vertexPositionAttribute);
}

function getShader(gl, id) {
 var shaderScript, theSource, currentChild, shader;
 shaderScript = document.getElementById(id);
 if (!shaderScript) {
 return null;
 }
 theSource = "";
 currentChild = shaderScript.firstChild;

 while(currentChild) {
 if (currentChild.nodeType == currentChild.TEXT_NODE) {
 theSource += currentChild.textContent;
 }
 currentChild = currentChild.nextSibling;
 }

 if (shaderScript.type == "x-shader/x-fragment") {
 shader = gl.createShader(gl.FRAGMENT_SHADER);
 } else if (shaderScript.type == "x-shader/x-vertex") {
 shader = gl.createShader(gl.VERTEX_SHADER);
 } else {

 return null;
 }

 gl.shaderSource(shader, theSource);

 gl.compileShader(shader);

 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
 return null;
 }
 return shader;
}



var horizAspect = 480.0/640.0;
function initBuffers() {
 squareVerticesBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
 var vertices = [
 1.0, 1.0, 0.0,
 -1.0, 1.0, 0.0,
 1.0, -1.0, 0.0,
 -1.0, -1.0, 0.0
 ];

 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}


function drawScene() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

 loadIdentity();
 mvTranslate([-0.0, 0.0, -6.0]);

 gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
 gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
 setMatrixUniforms();
 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

БЛОГ НА HUSL

Как правильно подключить шейдер в webGL

Ответы (0 шт):