[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] After installing latest Minefield : VertexAttribPointer: index out of range



There must be a reason for these two strange problems.Below you see almost the entire code.

Again the problems I have: 
1.firefox 4.0b6 and minefield4.0b08pre: getUniformLocation is returning null -> no lightening
2.Chromium: If using shader attribute for coloring, then switching to uniform-variable-coloring -> nothing is drawn/visible. 
See  

      if(!useUniformColor){
             //myColor=vertexColor;
      }
      else{
        myColor=constantColor; 
      }

I've out-commented the above  line, but also only the if-else-statement blocks everything. I have to do this to get it working in Chromium:
      //if(!useUniformColor){
             //myColor=vertexColor;
      //}
      //else{
         myColor=constantColor;  //ONLY letting these line there
      //}
----------------------------------------------------------------------------------------
Now the code:

<html>

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

<script type="text/_javascript_" src="">

<script id="shader-fs" type="x-shader/x-fragment">

   #ifdef GL_ES
   precision highp float;
   #endif
  
   varying vec3 vLightWeighting;
   varying vec3 myColor;

   // varying float zValue;
   void main(void) {
    gl_FragColor = vec4(myColor * vLightWeighting, 1.0);
   }
</script>

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

  uniform mat4 modelViewMatrix;
  uniform mat4 projektionsMatrix;
  uniform mat4 uNMatrix;
  
  
  uniform vec3 ambientLight;
  uniform vec3 constantColor; 
  
  uniform bool useUniformColor;
  
  varying vec3 vLightWeighting;
  varying vec3 myColor;

 void main(void) {

      vec4 mvPosition=modelViewMatrix*vec4(vertexPosition,1.0); 
      gl_Position = projektionsMatrix * mvPosition;

      vec3 ambientLightVar = ambientLight;
      vec3 directionalLightColor = vec3(0.6, 0.6, 0.6);
      vec3 directionalVector = vec3(-0.7, -0.7, 0.9);
  
      vec4 transformedNormal = uNMatrix * vec4(vertexNormale, 1.0);
 
      float directionalLightWeighting = max(dot(transformedNormal.xyz, directionalVector), 0.0);
      vLightWeighting = ambientLightVar + (directionalLightColor * directionalLightWeighting);
     
      
      if(!useUniformColor){

      }
      else{
        myColor=constantColor; 
      }
  }

</script>

<script type="text/_javascript_">

//---------------------------------------------------

//-------------------------------------------------------------------------------------

function glCentral(){        
this.models=[];
this.initialTranslation;
this.translation;

}
glCentral.prototype={
addModel: function(obj){
this.models.push(obj);
},
setInitialTranslation: function(x,y,z){
this.initialTranslation=[x,y,z];
this.initialTranslation2=[-(x),-(y),-(z)]
}
}
//-------------------------------------------------------------------------------------

function Model(name){
this.name=name;
this.modelColor=[1,0,0];
this.type;
this.vertices=[];
this.color=[];
this.verticesBuffer;
this.useUniformColor=true;
}


Model.prototype={
setVertices: function(v){
this.vertices=[];
this.vertices=v;
},
useColorByRGBUniform: function(c){
gl.uniform3f(shaderProgram.constantColor,c[0],c[1],c[2]);

},
createVerticesBuffer: function(){
this.positionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
this.checked=false;
     },
drawCallVertices: function(type){
switch(type){
case "triangle": gl.drawArrays(gl.TRIANGLES, 0, this.vertices.length/6);break;
case "line":     gl.drawArrays(gl.LINES, 0, this.vertices.length/3); break;
case "point": gl.drawArrays(gl.POINTS, 0, this.vertices.length/3); break;
}
}
}


function drawClass(name){
      Model.call(this,name);  
   
      this.drawVertexObject=function(){


      mvPushMatrix();

mvTranslate(allModels.translation);      
mvTranslate(allModels.initialTranslation);  
setMatrixUniforms();
 
this.createVerticesBuffer(); 
this.useColorByRGBUniform(this.modelColor);

gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 6*4, 0*4);

gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 6*4, 3*4);
gl.uniform1i(shaderProgram.useUniformColor,true);
this.drawCallVertices(this.type);
      mvPopMatrix();
   }
}
drawClass.prototype=new Model();

function triangleObject(name){
Model.call(this,name);
gl.uniform1i(shaderProgram.useUniformColor,true);
this.type="triangle";
this.draw=function(){
if(!this.deactivateDraw)this.drawVertexObject();
if(this.wireframe){this.drawWireframe()}; 
}
}

triangleObject.prototype=new drawClass();


//-------------------------------------------------------------------------



var mvMatrix=mat4.create();

function loadIdentity() {
    mat4.identity(mvMatrix); 
}

function multMatrix(m) {
    mvMatrix=mat4.multiply(mvMatrix, m);
}

function mvTranslate(v) {
    mat4.translate(mvMatrix,[v[0],v[1],v[2]]);
}

var pMatrix;
function perspective(fovy, aspect, znear, zfar) {
    pMatrix=mat4.create();
    pMatrix=mat4.perspective(fovy,aspect,znear,zfar);
}

  
var mvMatrixStack = [];
function mvPushMatrix(){
    var mv = mat4.create();
    mat4.identity(mv);

    mv=mat4.multiply(mv, mvMatrix); 
    mvMatrixStack.push(mv);
}

function mvPopMatrix(){
    if (mvMatrixStack.length == 0) {
      throw "Invalid popMatrix!";
    }
    mvMatrix = mvMatrixStack.pop();
    return mvMatrix;
}

function mvRotate(ang, v) {
    var arad = ang * Math.PI / 180.0;
    mat4.rotate(mvMatrix,arad,v);
}

function setMatrixUniforms() {
       gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
       gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
       var normalMatrix=mat4.inverse(mvMatrix);
       normalMatrix=mat4.transpose(normalMatrix);
       //alert(shaderProgram.nMatrixUniform)
       gl.uniformMatrix4fv(shaderProgram.nMatrixUniform, false, normalMatrix);
}

//----------------------------initialise WebGL----------------------------
  
  var gl;
function initGL(canvas) {  
    try {
      gl = canvas.getContext("experimental-webgl",{ antialias: true} );

          gl.viewportWidth = canvas.width;
          gl.viewportHeight = canvas.height;

    } catch(e) {
      }
    if (!gl) {
      alert("Browser unterstützt kein Webgl!");
    }
}

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, "vertexPosition");
     gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
     shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "vertexNormale");
     gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
     shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "vertexColor");
    
     
     //later i first activate the vertexColorAttribute via  gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
     //then use it with VBO.. after that I disable it and use constantColor.

     shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "projektionsMatrix");
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");
     shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
     shaderProgram.ambientLight = gl.getUniformLocation(shaderProgram, "ambientLight");
     shaderProgram.constantColor = gl.getUniformLocation(shaderProgram, "constantColor");
     shaderProgram.useUniFormColor = gl.getUniformLocation(shaderProgram, "useUniformColor");
     
 
}

//------------------Globale Variables-----------------
  var zoom =1;
  var xTrans=0 ;         
  var yTrans=0;         

  //-----------------------------Central Model Collector---------------------------
var allModels=new glCentral();
function initZentraleEinheit(v){
       allModels.setInitialTranslation(-(v[0]),-(v[1]),-(v[2])) 
       allModels.additionalTranslation=[0,0,0];
}


function drawScene() {

   gl.bindFramebuffer(gl.FRAMEBUFFER,null);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.clearColor(0.0,0.0,0.0,1.0)
   gl.enable(gl.DEPTH_TEST);
   
   gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
   perspective(45*zoom, gl.viewportWidth / gl.viewportHeight, 1, 140000.0);
   loadIdentity();
   drawModels();

}

//----------------------------AJAX- Request----------------------
var req;
function loadJSON(){
req = new XMLHttpRequest();
req.open("GET", "interleaved.json"); req.send(null); 
req.>
}

//---------------------load Models-----------------------
var m;
function loadModels(){
   if (req.readyState == 4){ 
       m = eval('(' + req.responseText + ')'); 
       
      for(var k=0;k<m.modelle.length;k++){
            var name=m.modelle[k].name;
            var vertices=m.modelle[k].vertices;
            var color=m.modelle[k].color;
            var type=m.modelle[k].type;
            zvalue=m.diagonal;
     
          if(type=="triangle"){
             var b=new triangleObject(name);
b.setVertices(vertices);
b.modelColor=color;
allModels.addModel(b);
          }
     }
     initZentraleEinheit(m.schwerpunkt);
         drawScene();
   }
}

var zvalue;
function drawModels(){
    gl.uniform3f(shaderProgram.ambientLight,0.3,0.3,0.3);
    allModels.translation=[xTrans,yTrans,-zvalue]
    var ausgabe=" ";
    for(var i=0;i<allModels.models.length;i++){
     allModels.models[i].draw();
    }
}


  var select=true;
  var canvas;
function webGLStart() {
    canvas = document.getElementById("canvas");
    initGL(canvas);
    initShaders();
    //initFBO();
    loadJSON();
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);  //gl.lineWidth(3.0);
   // drawScene();
}


</script>
</head>

<body >
  <canvas id="canvas" width="700" height="500" style="border: none;"></canvas><br>
</html>
</body>
</html>