windows 7 webgl on mac os x

autohandle · Post by **autohandle** » 5. Apr 2013, 20:07

i am trying to run a modifcation of the 1st webgl example in andreas anyuru's "professional webgl programming" book. in the original, the color is hard coded in the shader - that works. i modified the example to pass the color from outside the shader as an attribute (because i ran into a shader problem in a much later example) - that doesn't work. it fails on windows 7 running in virtualbox on the mac os x with 3d aceleration enabled. i loaded the example using the chrome browser's "open file" on the native mac os x and it works. i don't have a native windows 7 box to try it on - but i suspect it will work there, as well. is there some configuration parameter on virtualbox i should check?

Code: Select all

<!DOCTYPE HTML> 
<html lang="en"> 
<head>
<title>Listing 2-1, A First WebGL Example</title>
<meta charset="utf-8">
<script src="webgl-debug.js"></script>
<script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
var vertexBuffer;

function createGLContext(canvas) {
  var names = ["webgl", "experimental-webgl"];
  var context = null;
  for (var i=0; i < names.length; i++) {
    try {
      context = canvas.getContext(names[i]);
    } catch(e) {}
    if (context) {
      break;
    }
  }
  if (context) {
    context.viewportWidth = canvas.width;
    context.viewportHeight = canvas.height;
  } else {
    alert("Failed to create WebGL context!");
  }
  return context;
}

function loadShader(type, shaderSource) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);
  
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      alert("Error compiling shader" + gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);   
      return null;
  }
  return shader;  
}

function setupShaders() {
  var vertexShaderSource = 
    "attribute vec3 aVertexPosition;                 \n" +
    "attribute vec4 aVertexColor   ;                 \n" +
    "varying vec4 vColor;                            \n" +
    "void main() {                                   \n" +
    "  vColor =  aVertexColor;                       \n"+
    "  //vColor =  vec4(1.0, 0.0, 0.0, 1.0);// red     \n"+
    "  gl_Position = vec4(aVertexPosition, 1.0);     \n" +
    "}                                               \n";           
   
   var fragmentShaderSource = 
     "precision mediump float;                    \n"+
     "varying vec4 vColor;                        \n" +
     "void main() {                               \n"+
     "  gl_FragColor = vColor;                    \n"+
     "}                                           \n";
     
  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
  
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Failed to setup shaders");
  }

  gl.useProgram(shaderProgram);
  
  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
  shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
}

function setupBuffers() {
  vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  var triangleVertices = [
         0.0,  0.5,  0.0,
        -0.5, -0.5,  0.0,
         0.5, -0.5,  0.0
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
  vertexBuffer.itemSize = 3;
  vertexBuffer.numberOfItems = 3;
}

function draw() { 
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);                     
  gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 1.0, 0.0, 1.0);// green

  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  
  gl.drawArrays(gl.LINE_LOOP, 0, vertexBuffer.numberOfItems);
}

function startup() {
  canvas = document.getElementById("myGLCanvas");
  gl = createGLContext(canvas);
  gl = WebGLDebugUtils.makeDebugContext(createGLContext(canvas));
  setupShaders(); 
  setupBuffers();
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  draw();
}
</script>

</head>

<body onload="startup();">
  <canvas id="myGLCanvas" width="500" height="500"></canvas>
</body>

</html>