Jump to content
Sign in to follow this  
NoroZorro

Problem on initializing WebGL

Recommended Posts

NoroZorro

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

Share this post


Link to post
Share on other sites
NoroZorro

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.

Share this post


Link to post
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
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Sign in to follow this  

×
×
  • Create New...