Jump to content

Problem on initializing WebGL


NoroZorro

Recommended Posts

Hello,

 

Problem on initializing WebGL

 

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

q3.jpg

q2.jpg

Edited by NoroZorro
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...