Simple examples of somewhat complex scenes?

I am trying to write WebGL code automatically from rgl scenes in R. (If you don’t know rgl and R, it’s not really important.)

Part of the problem is that once things are working properly, I’m going to handle multiple objects in each scene (typically 5 or 10), each with its own vertex shader. Vertices in the objects may have separate colours. I will need to display points and lines as well as triangles.

Can anyone suggest examples like this? Currently I started working from a couple of simple examples at www.ibiblio.org/e-notes/webgl/webgl.htm (the ship and NaCLb5 examples), but there are no examples of drawing points there.

Also, are there any suggestions for debugging? My first attempt loads without errors, but nothing is being displayed.

Duncan Murdoch

I’ve made some progress, and can now display points. When I start trying complex scenes, there are signs that things are interfering with each other. For example, I’ve drawn a scene with some points in it, a linestrip, and some line segments, and the points end up not being drawn properly.

Is there a limit on the number of buffers that can be created? Or is something else obviously wrong with the auto-generated code below?

   // ****** linestrip object 22 ******
   var prog22  = gl.createProgram();
   gl.attachShader(prog22, getShader( gl, "pointshader" ));
   gl.attachShader(prog22, getShader( gl, "fragshader" ));
   gl.linkProgram(prog22);
   gl.useProgram(prog22);
   
   var v22=new Float32Array([

   1, 0.6680578, -1.419315, 1, 0, 0, 1, 2, -0.5118895, 1.149553, 1, 0.6,
   0, 1, 3, 0.1318272, 0.5548813, 0.8, 1, 0, 1, 4, 0.7821366, -0.05920344,
   0.2, 1, 0, 1, 5, 1.420805, -0.5575312, 0, 1, 0.4, 1, 6, 1.584401,
   0.8818259, 0, 1, 1, 1, 7, -1.678843, -0.5770879, 0, 0.4, 1, 1, 8,
   2.256711, 0.9912548, 0.2, 0, 1, 1, 9, 1.799058, -0.9156119, 0.8, 0, 1,
   1, 10, -0.9620292, -0.2763318, 1, 0, 0.6, 1

   ]);             
   var posLoc22 = gl.getAttribLocation(prog22, "aPos");
   gl.enableVertexAttribArray( posLoc22 );
   var colLoc22 = gl.getAttribLocation(prog22, "aCol");
   gl.enableVertexAttribArray( colLoc22 );

   gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
   gl.bufferData(gl.ARRAY_BUFFER, v22, gl.STATIC_DRAW);
   gl.vertexAttribPointer(posLoc22,  3, gl.FLOAT, false, 28,  0);
   gl.vertexAttribPointer(colLoc22, 4, gl.FLOAT, false, 28, 12);
   
   gl.uniformMatrix4fv( gl.getUniformLocation(prog22,"prMatrix"),
      false, new Float32Array(prMatrix.getAsArray()) );
   var mvMatLoc22 = gl.getUniformLocation(prog22,"mvMatrix");
   

   // ****** points object 26 ******
   var prog26  = gl.createProgram();
   gl.attachShader(prog26, getShader( gl, "pointshader" ));
   gl.attachShader(prog26, getShader( gl, "fragshader" ));
   gl.linkProgram(prog26);
   gl.useProgram(prog26);
   
   var v26=new Float32Array([

   1, 0.6680578, -1.419315, 1, 0, 0, 1, 2, -0.5118895, 1.149553, 1, 0.6,
   0, 1, 3, 0.1318272, 0.5548813, 0.8, 1, 0, 1, 4, 0.7821366, -0.05920344,
   0.2, 1, 0, 1, 5, 1.420805, -0.5575312, 0, 1, 0.4, 1, 6, 1.584401,
   0.8818259, 0, 1, 1, 1, 7, -1.678843, -0.5770879, 0, 0.4, 1, 1, 8,
   2.256711, 0.9912548, 0.2, 0, 1, 1, 9, 1.799058, -0.9156119, 0.8, 0, 1,
   1, 10, -0.9620292, -0.2763318, 1, 0, 0.6, 1

   ]);             
   var posLoc26 = gl.getAttribLocation(prog26, "aPos");
   gl.enableVertexAttribArray( posLoc26 );
   var colLoc26 = gl.getAttribLocation(prog26, "aCol");
   gl.enableVertexAttribArray( colLoc26 );

   gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
   gl.bufferData(gl.ARRAY_BUFFER, v26, gl.STATIC_DRAW);
   gl.vertexAttribPointer(posLoc26,  3, gl.FLOAT, false, 28,  0);
   gl.vertexAttribPointer(colLoc26, 4, gl.FLOAT, false, 28, 12);
   
   gl.uniformMatrix4fv( gl.getUniformLocation(prog26,"prMatrix"),
      false, new Float32Array(prMatrix.getAsArray()) );
   var mvMatLoc26 = gl.getUniformLocation(prog26,"mvMatrix");
   

   // ****** lines object 27 ******
   var prog27  = gl.createProgram();
   gl.attachShader(prog27, getShader( gl, "pointshader" ));
   gl.attachShader(prog27, getShader( gl, "fragshader" ));
   gl.linkProgram(prog27);
   gl.useProgram(prog27);
   
   var v27=new Float32Array([

   2, -1.737876, -1.457848, 0, 0, 0, 1, 10, -1.737876, -1.457848, 0, 0, 0,
   1, 2, -1.737876, -1.457848, 0, 0, 0, 1, 2, -1.839217, -1.523997, 0, 0,
   0, 1, 4, -1.737876, -1.457848, 0, 0, 0, 1, 4, -1.839217, -1.523997, 0,
   0, 0, 1, 6, -1.737876, -1.457848, 0, 0, 0, 1, 6, -1.839217, -1.523997,
   0, 0, 0, 1, 8, -1.737876, -1.457848, 0, 0, 0, 1, 8, -1.839217,
   -1.523997, 0, 0, 0, 1, 10, -1.737876, -1.457848, 0, 0, 0, 1, 10,
   -1.839217, -1.523997, 0, 0, 0, 1

   ]);             
   var posLoc27 = gl.getAttribLocation(prog27, "aPos");
   gl.enableVertexAttribArray( posLoc27 );
   var colLoc27 = gl.getAttribLocation(prog27, "aCol");
   gl.enableVertexAttribArray( colLoc27 );

   gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
   gl.bufferData(gl.ARRAY_BUFFER, v27, gl.STATIC_DRAW);
   gl.vertexAttribPointer(posLoc27,  3, gl.FLOAT, false, 28,  0);
   gl.vertexAttribPointer(colLoc27, 4, gl.FLOAT, false, 28, 12);
   
   gl.uniformMatrix4fv( gl.getUniformLocation(prog27,"prMatrix"),
      false, new Float32Array(prMatrix.getAsArray()) );
   var mvMatLoc27 = gl.getUniformLocation(prog27,"mvMatrix");

In case anyone is interested, I’ve posted the full code of the example (though with different object numbers) to http://www.stats.uwo.ca/faculty/murdoch/temp/webGL.

Got it! The problem was the order of doing things. I thought vertexAttribPointer() only needed to be called during initialization, but it needs to be called every time I redraw the scene. Not sure if it was the useProgram() or bindBuffer() calls that messed it up.

Hello,
I am having some problems to include multiple rgl outputs on one webpage using the writeWebGL function. It is working fine if I do not use a prefix and a single rgl output. If I change the template to e.g.
<div align=“center”>
%testWebGL%
</div>
And use test as a prefix : prefix=”test” then the function works fine in R but in my browser (Firefox, Firebug) I get the error: “webGLStart is not defined” with only a snapshot picture on my html page.
What am I doing wrong?
Best regards,
Roger

Issue solved! I did use the same template for graph2 as for graph1. Instead I had to replace the html output file from graph1 as the template for graph2. Also had to replace <body onload="webGLStart();> with <body onload=“graph1webGLStart();graph2webGLStart();”>