Skip to content

@stla /writeWebGL_R2152.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Problem html rendering knitr_1.2 + rgl_0.93.935 --- File 4/5 : html file generated by the writeWebGL() function using rgl_0.93.928 in R-2.15.2
<html><head>
<TITLE>RGL model</TITLE>
</head>
<body onload="webGLStart();">
<div align="center">
<script src="CanvasMatrix.js" type="text/javascript"></script>
<canvas id="textureCanvas" style="display: none;" width="256" height="256">
<img src="snapshot.png" alt="snapshot" width=500/><br>
Your browser does not support the HTML5 canvas element.</canvas>
<!-- ****** points object 6 ****** -->
<script id="vshader6" type="x-shader/x-vertex">
attribute vec3 aPos;
attribute vec4 aCol;
uniform mat4 mvMatrix;
uniform mat4 prMatrix;
varying vec4 vDiffuse;
void main(void) {
gl_Position = prMatrix * mvMatrix * vec4(aPos, 1.);
gl_PointSize = 3.;
vDiffuse = aCol;
}
</script>
<script id="fshader6" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vDiffuse; // carries alpha
void main(void) {
vec4 diffuse;
diffuse = vDiffuse;
gl_FragColor = diffuse;
}
</script>
<script type="text/javascript">
function getShader ( gl, id ){
var shaderScript = document.getElementById ( id );
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) == 0)
alert(gl.getShaderInfoLog(shader));
return shader;
}
var min = Math.min;
var max = Math.max;
var sqrt = Math.sqrt;
var sin = Math.sin;
var acos = Math.acos;
var tan = Math.tan;
var SQRT2 = Math.SQRT2;
var PI = Math.PI;
var log = Math.log;
var exp = Math.exp;
function webGLStart() {
var debug = function(msg) {
document.getElementById("debug").innerHTML = msg;
}
debug("");
var canvas = document.getElementById("canvas");
if (!window.WebGLRenderingContext){
debug("<img src=\"snapshot.png\" alt=\"snapshot\" width=500/><br> Your browser does not support WebGL. See <a href=\"http://get.webgl.org\">http://get.webgl.org</a>");
return;
}
var gl;
try {
// Try to grab the standard context. If it fails, fallback to experimental.
gl = canvas.getContext("webgl")
|| canvas.getContext("experimental-webgl");
}
catch(e) {}
if ( !gl ) {
debug("<img src=\"snapshot.png\" alt=\"snapshot\" width=500/><br> Your browser appears to support WebGL, but did not create a WebGL context. See <a href=\"http://get.webgl.org\">http://get.webgl.org</a>");
return;
}
var width = 500; var height = 500;
canvas.width = width; canvas.height = height;
gl.viewport(0, 0, width, height);
var prMatrix = new CanvasMatrix4();
var mvMatrix = new CanvasMatrix4();
var normMatrix = new CanvasMatrix4();
var saveMat = new CanvasMatrix4();
saveMat.makeIdentity();
var distance;
var zoom = 1;
var fov = 30;
var userMatrix = new CanvasMatrix4();
userMatrix.load([
1, 0, 0, 0,
0, 0.3420201, -0.9396926, 0,
0, 0.9396926, 0.3420201, 0,
0, 0, 0, 1
]);
function getPowerOfTwo(value) {
var pow = 1;
while(pow<value) {
pow *= 2;
}
return pow;
}
function handleLoadedTexture(texture, textureCanvas) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
function loadImageToTexture(filename, texture) {
var canvas = document.getElementById("textureCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
var w = image.width;
var h = image.height;
var canvasX = getPowerOfTwo(w);
var canvasY = getPowerOfTwo(h);
canvas.width = canvasX;
canvas.height = canvasY;
ctx.imageSmoothingEnabled = true;
ctx.drawImage(image, 0, 0, canvasX, canvasY);
handleLoadedTexture(texture, canvas);
drawScene();
}
image.src = filename;
}
// ****** points object 6 ******
var prog6 = gl.createProgram();
gl.attachShader(prog6, getShader( gl, "vshader6" ));
gl.attachShader(prog6, getShader( gl, "fshader6" ));
gl.linkProgram(prog6);
var v=new Float32Array([
0, 0, 0,
-1, 4, 0,
4, 9, 0,
6, 3, 0
]);
var posLoc6 = gl.getAttribLocation(prog6, "aPos");
var colLoc6 = gl.getAttribLocation(prog6, "aCol");
var buf6 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf6);
gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW);
var mvMatLoc6 = gl.getUniformLocation(prog6,"mvMatrix");
var prMatLoc6 = gl.getUniformLocation(prog6,"prMatrix");
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clearDepth(1.0);
gl.clearColor(1, 1, 1, 1);
var xOffs = yOffs = 0, drag = 0;
drawScene();
function drawScene(){
gl.depthMask(true);
gl.disable(gl.BLEND);
var radius = 6.270965;
var s = sin(fov*PI/360);
var t = tan(fov*PI/360);
var distance = radius/s;
var near = distance - radius;
var far = distance + radius;
var hlen = t*near;
var aspect = width/height;
prMatrix.makeIdentity();
if (aspect > 1)
prMatrix.frustum(-hlen*aspect*zoom, hlen*aspect*zoom,
-hlen*zoom, hlen*zoom, near, far);
else
prMatrix.frustum(-hlen*zoom, hlen*zoom,
-hlen*zoom/aspect, hlen*zoom/aspect,
near, far);
mvMatrix.makeIdentity();
mvMatrix.translate( -2.5, -4.5, -0 );
mvMatrix.scale( 1, 1, 1 );
mvMatrix.multRight( userMatrix );
mvMatrix.translate(0, 0, -distance);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// ****** points object 6 *******
gl.useProgram(prog6);
gl.bindBuffer(gl.ARRAY_BUFFER, buf6);
gl.uniformMatrix4fv( prMatLoc6, false, new Float32Array(prMatrix.getAsArray()) );
gl.uniformMatrix4fv( mvMatLoc6, false, new Float32Array(mvMatrix.getAsArray()) );
gl.enableVertexAttribArray( posLoc6 );
gl.disableVertexAttribArray( colLoc6 );
gl.vertexAttrib4f( colLoc6, 1, 0, 0, 1 );
gl.vertexAttribPointer(posLoc6, 3, gl.FLOAT, false, 12, 0);
gl.drawArrays(gl.POINTS, 0, 4);
gl.flush ();
}
var vlen = function(v) {
return sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2])
}
var xprod = function(a, b) {
return [a[1]*b[2] - a[2]*b[1],
a[2]*b[0] - a[0]*b[2],
a[0]*b[1] - a[1]*b[0]];
}
var screenToVector = function(x, y) {
var radius = max(width, height)/2.0;
var cx = width/2.0;
var cy = height/2.0;
var px = (x-cx)/radius;
var py = (y-cy)/radius;
var plen = sqrt(px*px+py*py);
if (plen > 1.e-6) {
px = px/plen;
py = py/plen;
}
var angle = (SQRT2 - plen)/SQRT2*PI/2;
var z = sin(angle);
var zlen = sqrt(1.0 - z*z);
px = px * zlen;
py = py * zlen;
return [px, py, z];
}
var rotBase;
var trackballdown = function(x,y) {
rotBase = screenToVector(x, y);
saveMat.load(userMatrix);
}
var trackballmove = function(x,y) {
var rotCurrent = screenToVector(x,y);
var dot = rotBase[0]*rotCurrent[0] +
rotBase[1]*rotCurrent[1] +
rotBase[2]*rotCurrent[2];
var angle = acos( dot/vlen(rotBase)/vlen(rotCurrent) )*180./PI;
var axis = xprod(rotBase, rotCurrent);
userMatrix.load(saveMat);
userMatrix.rotate(angle, axis[0], axis[1], axis[2]);
drawScene();
}
var y0zoom = 0;
var zoom0 = 1;
var zoomdown = function(x, y) {
y0zoom = y;
zoom0 = log(zoom);
}
var zoommove = function(x, y) {
zoom = exp(zoom0 + (y-y0zoom)/height);
drawScene();
}
var y0fov = 0;
var fov0 = 1;
var fovdown = function(x, y) {
y0fov = y;
fov0 = fov;
}
var fovmove = function(x, y) {
fov = max(1, min(179, fov0 + 180*(y-y0fov)/height));
drawScene();
}
var mousedown = [trackballdown, zoomdown, fovdown];
var mousemove = [trackballmove, zoommove, fovmove];
function relMouseCoords(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var currentElement = canvas;
do{
totalOffsetX += currentElement.offsetLeft;
totalOffsetY += currentElement.offsetTop;
}
while(currentElement = currentElement.offsetParent)
var canvasX = event.pageX - totalOffsetX;
var canvasY = event.pageY - totalOffsetY;
return {x:canvasX, y:canvasY}
}
canvas.onmousedown = function ( ev ){
if (!ev.which) // Use w3c defns in preference to MS
switch (ev.button) {
case 0: ev.which = 1; break;
case 1:
case 4: ev.which = 2; break;
case 2: ev.which = 3;
}
drag = ev.which;
var f = mousedown[drag-1];
if (f) {
var coords = relMouseCoords(ev);
f(coords.x, height-coords.y);
ev.preventDefault();
}
}
canvas.onmouseup = function ( ev ){
drag = 0;
}
canvas.onmouseout = canvas.onmouseup;
canvas.onmousemove = function ( ev ){
if ( drag == 0 ) return;
var f = mousemove[drag-1];
if (f) {
var coords = relMouseCoords(ev);
f(coords.x, height-coords.y);
}
}
var wheelHandler = function(ev) {
var del = 1.1;
if (ev.shiftKey) del = 1.01;
var ds = ((ev.detail || ev.wheelDelta) > 0) ? del : (1 / del);
zoom *= ds;
drawScene();
ev.preventDefault();
};
canvas.addEventListener("DOMMouseScroll", wheelHandler, false);
canvas.addEventListener("mousewheel", wheelHandler, false);
}
</script>
<canvas id="canvas" width="1" height="1"></canvas>
<p id="debug">
<img src="snapshot.png" alt="snapshot" width=500/><br>
You must enable Javascript to view this page properly.</p>
</div>
<br>Drag mouse to rotate model. Use mouse wheel or middle button
to zoom it.
<hr>
<br>
Object written from rgl by writeWebGL.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.