Problem on initializing WebGL

February 9, 2014

Hello,

1. picture q2

2. picture q3

3. http://support.pixlr.com/pixlr/topics/problem_on_initializing_webgl

Allow me to share a russian proverb....It's hard to look for a black cat in dark room, especially if there is none.

<html>

<head>
<title>Learning WebGL — lesson 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript"  src="glMatrix-0.9.5.min.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
   precision mediump float;

   void main(void) {
       gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
   }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
   attribute vec3 aVertexPosition;

   uniform mat4 uMVMatrix;
   uniform mat4 uPMatrix;

   void main(void) {
       gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
   }
</script>


<script type="text/javascript">

   var gl;
   function initGL(canvas) {
       try {
           gl = canvas.getContext("experimental-webgl");
           gl.viewportWidth = canvas.width;
           gl.viewportHeight = canvas.height;
       } catch (e) {
       }
       if (!gl) {
           alert("Could not initialise WebGL, sorry :-(");
       }
   }


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

       var str = "";
       var k = shaderScript.firstChild;
       while (k) {
           if (k.nodeType == 3) {
               str += k.textContent;
           }
           k = k.nextSibling;
       }

       var shader;
       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, str);
       gl.compileShader(shader);

       if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
           alert(gl.getShaderInfoLog(shader));
           return null;
       }

       return shader;
   }


   var shaderProgram;

   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("Could not initialise shaders");
       }

       gl.useProgram(shaderProgram);

       shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
       gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

       shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
       shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
   }


   var mvMatrix = mat4.create();
   var pMatrix = mat4.create();

   function setMatrixUniforms() {
       gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
       gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
   }



   var triangleVertexPositionBuffer;
   var squareVertexPositionBuffer;

   function initBuffers() {
       triangleVertexPositionBuffer = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
       var vertices = [
            0.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);
       triangleVertexPositionBuffer.itemSize = 3;
       triangleVertexPositionBuffer.numItems = 3;

       squareVertexPositionBuffer = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
       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);
       squareVertexPositionBuffer.itemSize = 3;
       squareVertexPositionBuffer.numItems = 4;
   }


   function drawScene() {
       gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

       mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

       mat4.identity(mvMatrix);

       mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
       gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
       gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
       setMatrixUniforms();
       gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);


       mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
       gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
       gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
       setMatrixUniforms();
       gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
   }



   function webGLStart() {
       var canvas = document.getElementById("lesson01-canvas");
       initGL(canvas);
       initShaders();
       initBuffers();

       gl.clearColor(0.0, 0.0, 0.0, 1.0);
       gl.enable(gl.DEPTH_TEST);

       drawScene();
   }


</script>


</head>


<body onload="webGLStart();">
   <a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1</a><br />

   <canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>

   <br/>
   <a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1</a><br />
</body>

</html>

Your help is appreciated as always

Edited February 9, 2014 by NoroZorro

February 13, 2014

Hi

Please don't waste your time in replying to this thread.Switching to flash with away3d.

regards

P.s.

Admin sorry for inconvenience. Do whatever you like with this thread.

Sign In

Problem on initializing WebGL

Recommended Posts

NoroZorro

NoroZorro

Join the conversation

Tutorials

Forums

Activity