This is an R Markdown document. Markdown is a simple formatting syntax for authoring web pages (click the MD toolbar button for help on Markdown).
When you click the Knit HTML button a web page will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
You can also embed plots, for example:
library(rgl)
#
knit_hooks$set(rgl = function(before, options, envir) {
# if a device was opened before this chunk, close it
if (before && rgl.cur() > 0)
rgl.close()
hook_rgl(before, options, envir)
})
n <- 100
x <- rnorm(n)
y <- rnorm(n)
z <- rnorm(n)
plot3d(x, y, z)
## <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> <!-- ****** text object 8 ****** --> <script id="vshader8" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader8" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** text object 9 ****** --> <script id="vshader9" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader9" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** text object 10 ****** --> <script id="vshader10" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader10" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** lines object 11 ****** --> <script id="vshader11" 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.); vDiffuse = aCol; } </script> <script id="fshader11" 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> <!-- ****** text object 12 ****** --> <script id="vshader12" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader12" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** lines object 13 ****** --> <script id="vshader13" 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.); vDiffuse = aCol; } </script> <script id="fshader13" 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> <!-- ****** text object 14 ****** --> <script id="vshader14" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader14" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** lines object 15 ****** --> <script id="vshader15" 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.); vDiffuse = aCol; } </script> <script id="fshader15" 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> <!-- ****** text object 16 ****** --> <script id="vshader16" type="x-shader/x-vertex"> attribute vec3 aPos; attribute vec4 aCol; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 vDiffuse; attribute vec2 aTexcoord; varying vec2 vTexcoord; attribute vec2 aOfs; void main(void) { vDiffuse = aCol; vTexcoord = aTexcoord; vec4 pos = prMatrix * mvMatrix * vec4(aPos, 1.); pos = pos/pos.w; gl_Position = pos + vec4(aOfs, 0.,0.); } </script> <script id="fshader16" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vDiffuse; // carries alpha varying vec2 vTexcoord; uniform sampler2D uSampler; void main(void) { vec4 diffuse; diffuse = vDiffuse; vec4 textureColor = diffuse*texture2D(uSampler, vTexcoord); if (textureColor.a < 0.1) discard; else gl_FragColor = textureColor; } </script> <!-- ****** lines object 17 ****** --> <script id="vshader17" 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.); vDiffuse = aCol; } </script> <script id="fshader17" 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 = 428.7129; 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; } function drawTextToCanvas(text, cex) { var canvasX, canvasY; var textX, textY; var textHeight = 20 * cex; var textColour = "white"; var fontFamily = "Arial"; var backgroundColour = "rgba(0,0,0,0)"; var canvas = document.getElementById("textureCanvas"); var ctx = canvas.getContext("2d"); ctx.font = textHeight+"px "+fontFamily; canvasX = 1; var widths = []; for (var i = 0; i < text.length; i++) { widths[i] = ctx.measureText(text[i]).width; canvasX = (widths[i] > canvasX) ? widths[i] : canvasX; } canvasX = getPowerOfTwo(canvasX); var offset = 2*textHeight; // offset to first baseline var skip = 2*textHeight; // skip between baselines canvasY = getPowerOfTwo(offset + text.length*skip); canvas.width = canvasX; canvas.height = canvasY; ctx.fillStyle = backgroundColour; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = textColour; ctx.textAlign = "left"; ctx.textBaseline = "alphabetic"; ctx.font = textHeight+"px "+fontFamily; for(var i = 0; i < text.length; i++) { textY = i*skip + offset; ctx.fillText(text[i], 0, textY); } return {canvasX:canvasX, canvasY:canvasY, widths:widths, textHeight:textHeight, offset:offset, skip:skip}; } // ****** 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.5513852, 0.1522183, 0.2855798, 1.44058, 0.3198704, 2.231404, 0.3006464, -0.3702416, 0.6252061, -2.885921, -1.02571, -1.216834, 2.211836, 1.406119, 0.3991745, -0.6538446, 2.887773, 0.08925565, -0.8676054, -1.009457, -1.148401, 1.772089, -0.514647, -0.4875118, -0.7272971, 0.9083414, -0.850662, 0.254189, 0.03286137, -0.2400376, -0.860998, 0.2249724, 0.9336081, 2.06371, -1.214774, -0.1906733, -0.4240256, 0.1419567, -0.1591401, -0.2842115, -0.283718, 1.464934, -0.1195013, 0.1960668, 0.3961886, -0.4344001, -0.1494295, -1.079563, 0.4047674, 1.293558, 0.9572001, 0.6690382, 0.9625351, -0.8272163, -0.2054884, 1.702796, -1.896218, 0.1377783, -1.40391, 1.058055, -0.9431435, -0.6279096, 1.093623, -0.342045, 2.054489, -3.055446, -0.1907444, 2.314857, 0.3205997, 0.8783178, 0.3865735, -1.422422, -0.06552012, -0.8872014, 0.3481929, -0.6520411, -0.1926097, 0.4934346, -0.9054018, -1.412406, 0.002885386, -0.6835456, 2.634696, -0.3474673, -1.025773, -0.2232862, -1.296618, 1.891412, -0.568289, 0.3966815, -0.007560304, -1.128282, 0.8606774, 1.3888, 0.2469124, -0.9463407, 1.39909, 0.5174333, -0.5109503, 0.4678495, -0.1862444, 0.2475909, 0.3939206, -1.29817, -0.0003365172, 1.418636, -1.7015, 0.06139837, -1.161435, -0.6753549, 1.073597, -0.6894104, 0.5908499, 0.3842522, -0.1977455, 0.905027, 1.022797, -3.02656, 1.519967, 1.259145, -0.865579, 0.598589, -0.1016497, -0.2187233, -0.0285597, 0.6431541, -0.4571536, -0.07738671, -0.9677412, 0.6165362, -0.6672483, 0.218441, -0.5530627, -0.8749509, -0.3188105, -0.2081866, 0.4466321, -0.3024396, -2.021625, 0.3654537, -0.05407741, 0.2396666, -1.4825, 1.396762, 0.2720075, -2.041226, -0.9066645, -0.8333912, 1.323063, 0.8282969, -1.546092, 0.7164214, 0.3335234, 0.3331012, 1.035836, 0.7493635, -0.5355494, 1.843263, -1.182866, -1.943208, -0.6201956, -1.128171, -0.6435775, -0.4104566, -0.5342383, 0.09788578, -1.30952, -1.670365, -0.4024995, 0.9359226, 1.458817, -0.04186922, -1.350198, 1.292889, -0.9957762, -0.7745881, 0.3388054, 1.276667, 0.3227544, 1.76351, -1.012986, -0.707945, -0.8703756, 0.08534067, -0.1274441, -0.1101052, 0.9816582, 0.5958711, -0.473774, 0.1116748, -0.2447199, -0.4752061, -0.5293714, 1.35336, 0.03800481, -0.05825551, 0.7620512, -0.06248863, -0.3648493, -2.332839, -0.584018, 1.488821, -1.090744, 1.170777, 0.1027246, 0.3926378, -2.004876, -1.686985, 0.3794541, -0.1961778, 0.5002339, 0.7266256, -1.303158, -0.3142988, 0.9747011, -0.7083784, -0.2035403, 0.6352534, 2.298376, -0.2740664, -0.5391165, 1.757246, -0.3145188, -0.6504864, -0.3458823, -1.459181, -0.4285103, -1.294362, 0.7439286, -0.6075947, 0.09332874, 0.2716115, -0.811739, -0.5283105, -0.8330249, 0.2040842, 1.588195, -0.1548472, 0.6222761, -1.267038, -0.3547482, -2.470469, -0.4217179, -0.2362527, -0.6612648, -1.011123, 0.03133342, 2.51763, 2.377618, -0.3789947, -0.7972877, 1.622548, -0.5857652, 0.8741685, -0.9998838, 0.7707523, 1.523794, -2.943863, -0.1216086, -1.366961, -1.232484, -1.113543, 0.1830976, -0.5483162, -1.314742, -0.6289021, -0.4659142, -0.3933063, 1.170952, -0.3096591, -1.048225, 0.3341517, -1.088882, 0.6781926, -0.4568678, -1.604888, 0.8220659, -0.3828916, -0.3145806, 1.605804, -0.02141187, 0.7047401, -0.1801725, -1.978053, 0.2862364, -0.09576928, -0.6599842, -0.4318846, -0.2686026, -2.03995, -1.540839, 1.598477, 0.6844313, -1.222515, -2.567569, -0.5520035, 1.714106, 0.1797441, -0.3482905, -2.758342 ]); 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"); // ****** text object 8 ****** var prog8 = gl.createProgram(); gl.attachShader(prog8, getShader( gl, "vshader8" )); gl.attachShader(prog8, getShader( gl, "fshader8" )); gl.linkProgram(prog8); var texts = [ "x" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX8 = texinfo.canvasX; var canvasY8 = texinfo.canvasY; var ofsLoc8 = gl.getAttribLocation(prog8, "aOfs"); var texture8 = gl.createTexture(); var texLoc8 = gl.getAttribLocation(prog8, "aTexcoord"); var sampler8 = gl.getUniformLocation(prog8,"uSampler"); handleLoadedTexture(texture8, document.getElementById("textureCanvas")); var v=new Float32Array([ -0.4073621, -3.378691, -3.97635, 0, -0.5, 0.5, 0.5, -0.4073621, -3.378691, -3.97635, 1, -0.5, 0.5, 0.5, -0.4073621, -3.378691, -3.97635, 1, 1.5, 0.5, 0.5, -0.4073621, -3.378691, -3.97635, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<1; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc8 = gl.getAttribLocation(prog8, "aPos"); var colLoc8 = gl.getAttribLocation(prog8, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3 ]); var buf8 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf8); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf8 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf8); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc8 = gl.getUniformLocation(prog8,"mvMatrix"); var prMatLoc8 = gl.getUniformLocation(prog8,"prMatrix"); // ****** text object 9 ****** var prog9 = gl.createProgram(); gl.attachShader(prog9, getShader( gl, "vshader9" )); gl.attachShader(prog9, getShader( gl, "fshader9" )); gl.linkProgram(prog9); var texts = [ "y" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX9 = texinfo.canvasX; var canvasY9 = texinfo.canvasY; var ofsLoc9 = gl.getAttribLocation(prog9, "aOfs"); var texture9 = gl.createTexture(); var texLoc9 = gl.getAttribLocation(prog9, "aTexcoord"); var sampler9 = gl.getUniformLocation(prog9,"uSampler"); handleLoadedTexture(texture9, document.getElementById("textureCanvas")); var v=new Float32Array([ -3.914468, 0.2086519, -3.97635, 0, -0.5, 0.5, 0.5, -3.914468, 0.2086519, -3.97635, 1, -0.5, 0.5, 0.5, -3.914468, 0.2086519, -3.97635, 1, 1.5, 0.5, 0.5, -3.914468, 0.2086519, -3.97635, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<1; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc9 = gl.getAttribLocation(prog9, "aPos"); var colLoc9 = gl.getAttribLocation(prog9, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3 ]); var buf9 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf9); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf9 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf9); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc9 = gl.getUniformLocation(prog9,"mvMatrix"); var prMatLoc9 = gl.getUniformLocation(prog9,"prMatrix"); // ****** text object 10 ****** var prog10 = gl.createProgram(); gl.attachShader(prog10, getShader( gl, "vshader10" )); gl.attachShader(prog10, getShader( gl, "fshader10" )); gl.linkProgram(prog10); var texts = [ "z" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX10 = texinfo.canvasX; var canvasY10 = texinfo.canvasY; var ofsLoc10 = gl.getAttribLocation(prog10, "aOfs"); var texture10 = gl.createTexture(); var texLoc10 = gl.getAttribLocation(prog10, "aTexcoord"); var sampler10 = gl.getUniformLocation(prog10,"uSampler"); handleLoadedTexture(texture10, document.getElementById("textureCanvas")); var v=new Float32Array([ -3.914468, -3.378691, -0.3389142, 0, -0.5, 0.5, 0.5, -3.914468, -3.378691, -0.3389142, 1, -0.5, 0.5, 0.5, -3.914468, -3.378691, -0.3389142, 1, 1.5, 0.5, 0.5, -3.914468, -3.378691, -0.3389142, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<1; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc10 = gl.getAttribLocation(prog10, "aPos"); var colLoc10 = gl.getAttribLocation(prog10, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3 ]); var buf10 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf10); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf10 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf10); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc10 = gl.getUniformLocation(prog10,"mvMatrix"); var prMatLoc10 = gl.getUniformLocation(prog10,"prMatrix"); // ****** lines object 11 ****** var prog11 = gl.createProgram(); gl.attachShader(prog11, getShader( gl, "vshader11" )); gl.attachShader(prog11, getShader( gl, "fshader11" )); gl.linkProgram(prog11); var v=new Float32Array([ -3, -2.550843, -3.136942, 2, -2.550843, -3.136942, -3, -2.550843, -3.136942, -3, -2.688818, -3.276843, -2, -2.550843, -3.136942, -2, -2.688818, -3.276843, -1, -2.550843, -3.136942, -1, -2.688818, -3.276843, 0, -2.550843, -3.136942, 0, -2.688818, -3.276843, 1, -2.550843, -3.136942, 1, -2.688818, -3.276843, 2, -2.550843, -3.136942, 2, -2.688818, -3.276843 ]); var posLoc11 = gl.getAttribLocation(prog11, "aPos"); var colLoc11 = gl.getAttribLocation(prog11, "aCol"); var buf11 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf11); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var mvMatLoc11 = gl.getUniformLocation(prog11,"mvMatrix"); var prMatLoc11 = gl.getUniformLocation(prog11,"prMatrix"); // ****** text object 12 ****** var prog12 = gl.createProgram(); gl.attachShader(prog12, getShader( gl, "vshader12" )); gl.attachShader(prog12, getShader( gl, "fshader12" )); gl.linkProgram(prog12); var texts = [ "-3", "-2", "-1", "0", "1", "2" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX12 = texinfo.canvasX; var canvasY12 = texinfo.canvasY; var ofsLoc12 = gl.getAttribLocation(prog12, "aOfs"); var texture12 = gl.createTexture(); var texLoc12 = gl.getAttribLocation(prog12, "aTexcoord"); var sampler12 = gl.getUniformLocation(prog12,"uSampler"); handleLoadedTexture(texture12, document.getElementById("textureCanvas")); var v=new Float32Array([ -3, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, -3, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, -3, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, -3, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5, -2, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, -2, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, -2, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, -2, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5, -1, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, -1, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, -1, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, -1, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5, 0, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, 0, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, 0, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, 0, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5, 1, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, 1, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, 1, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, 1, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5, 2, -2.964767, -3.556646, 0, -0.5, 0.5, 0.5, 2, -2.964767, -3.556646, 1, -0.5, 0.5, 0.5, 2, -2.964767, -3.556646, 1, 1.5, 0.5, 0.5, 2, -2.964767, -3.556646, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<6; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc12 = gl.getAttribLocation(prog12, "aPos"); var colLoc12 = gl.getAttribLocation(prog12, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23 ]); var buf12 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf12); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf12 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf12); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc12 = gl.getUniformLocation(prog12,"mvMatrix"); var prMatLoc12 = gl.getUniformLocation(prog12,"prMatrix"); // ****** lines object 13 ****** var prog13 = gl.createProgram(); gl.attachShader(prog13, getShader( gl, "vshader13" )); gl.attachShader(prog13, getShader( gl, "fshader13" )); gl.linkProgram(prog13); var v=new Float32Array([ -3.105136, -2, -3.136942, -3.105136, 2, -3.136942, -3.105136, -2, -3.136942, -3.240024, -2, -3.276843, -3.105136, -1, -3.136942, -3.240024, -1, -3.276843, -3.105136, 0, -3.136942, -3.240024, 0, -3.276843, -3.105136, 1, -3.136942, -3.240024, 1, -3.276843, -3.105136, 2, -3.136942, -3.240024, 2, -3.276843 ]); var posLoc13 = gl.getAttribLocation(prog13, "aPos"); var colLoc13 = gl.getAttribLocation(prog13, "aCol"); var buf13 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf13); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var mvMatLoc13 = gl.getUniformLocation(prog13,"mvMatrix"); var prMatLoc13 = gl.getUniformLocation(prog13,"prMatrix"); // ****** text object 14 ****** var prog14 = gl.createProgram(); gl.attachShader(prog14, getShader( gl, "vshader14" )); gl.attachShader(prog14, getShader( gl, "fshader14" )); gl.linkProgram(prog14); var texts = [ "-2", "-1", "0", "1", "2" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX14 = texinfo.canvasX; var canvasY14 = texinfo.canvasY; var ofsLoc14 = gl.getAttribLocation(prog14, "aOfs"); var texture14 = gl.createTexture(); var texLoc14 = gl.getAttribLocation(prog14, "aTexcoord"); var sampler14 = gl.getUniformLocation(prog14,"uSampler"); handleLoadedTexture(texture14, document.getElementById("textureCanvas")); var v=new Float32Array([ -3.509802, -2, -3.556646, 0, -0.5, 0.5, 0.5, -3.509802, -2, -3.556646, 1, -0.5, 0.5, 0.5, -3.509802, -2, -3.556646, 1, 1.5, 0.5, 0.5, -3.509802, -2, -3.556646, 0, 1.5, 0.5, 0.5, -3.509802, -1, -3.556646, 0, -0.5, 0.5, 0.5, -3.509802, -1, -3.556646, 1, -0.5, 0.5, 0.5, -3.509802, -1, -3.556646, 1, 1.5, 0.5, 0.5, -3.509802, -1, -3.556646, 0, 1.5, 0.5, 0.5, -3.509802, 0, -3.556646, 0, -0.5, 0.5, 0.5, -3.509802, 0, -3.556646, 1, -0.5, 0.5, 0.5, -3.509802, 0, -3.556646, 1, 1.5, 0.5, 0.5, -3.509802, 0, -3.556646, 0, 1.5, 0.5, 0.5, -3.509802, 1, -3.556646, 0, -0.5, 0.5, 0.5, -3.509802, 1, -3.556646, 1, -0.5, 0.5, 0.5, -3.509802, 1, -3.556646, 1, 1.5, 0.5, 0.5, -3.509802, 1, -3.556646, 0, 1.5, 0.5, 0.5, -3.509802, 2, -3.556646, 0, -0.5, 0.5, 0.5, -3.509802, 2, -3.556646, 1, -0.5, 0.5, 0.5, -3.509802, 2, -3.556646, 1, 1.5, 0.5, 0.5, -3.509802, 2, -3.556646, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<5; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc14 = gl.getAttribLocation(prog14, "aPos"); var colLoc14 = gl.getAttribLocation(prog14, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19 ]); var buf14 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf14); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf14 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf14); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc14 = gl.getUniformLocation(prog14,"mvMatrix"); var prMatLoc14 = gl.getUniformLocation(prog14,"prMatrix"); // ****** lines object 15 ****** var prog15 = gl.createProgram(); gl.attachShader(prog15, getShader( gl, "vshader15" )); gl.attachShader(prog15, getShader( gl, "fshader15" )); gl.linkProgram(prog15); var v=new Float32Array([ -3.105136, -2.550843, -3, -3.105136, -2.550843, 2, -3.105136, -2.550843, -3, -3.240024, -2.688818, -3, -3.105136, -2.550843, -2, -3.240024, -2.688818, -2, -3.105136, -2.550843, -1, -3.240024, -2.688818, -1, -3.105136, -2.550843, 0, -3.240024, -2.688818, 0, -3.105136, -2.550843, 1, -3.240024, -2.688818, 1, -3.105136, -2.550843, 2, -3.240024, -2.688818, 2 ]); var posLoc15 = gl.getAttribLocation(prog15, "aPos"); var colLoc15 = gl.getAttribLocation(prog15, "aCol"); var buf15 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf15); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var mvMatLoc15 = gl.getUniformLocation(prog15,"mvMatrix"); var prMatLoc15 = gl.getUniformLocation(prog15,"prMatrix"); // ****** text object 16 ****** var prog16 = gl.createProgram(); gl.attachShader(prog16, getShader( gl, "vshader16" )); gl.attachShader(prog16, getShader( gl, "fshader16" )); gl.linkProgram(prog16); var texts = [ "-3", "-2", "-1", "0", "1", "2" ]; var texinfo = drawTextToCanvas(texts, 1); var canvasX16 = texinfo.canvasX; var canvasY16 = texinfo.canvasY; var ofsLoc16 = gl.getAttribLocation(prog16, "aOfs"); var texture16 = gl.createTexture(); var texLoc16 = gl.getAttribLocation(prog16, "aTexcoord"); var sampler16 = gl.getUniformLocation(prog16,"uSampler"); handleLoadedTexture(texture16, document.getElementById("textureCanvas")); var v=new Float32Array([ -3.509802, -2.964767, -3, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, -3, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, -3, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, -3, 0, 1.5, 0.5, 0.5, -3.509802, -2.964767, -2, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, -2, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, -2, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, -2, 0, 1.5, 0.5, 0.5, -3.509802, -2.964767, -1, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, -1, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, -1, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, -1, 0, 1.5, 0.5, 0.5, -3.509802, -2.964767, 0, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, 0, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, 0, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, 0, 0, 1.5, 0.5, 0.5, -3.509802, -2.964767, 1, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, 1, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, 1, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, 1, 0, 1.5, 0.5, 0.5, -3.509802, -2.964767, 2, 0, -0.5, 0.5, 0.5, -3.509802, -2.964767, 2, 1, -0.5, 0.5, 0.5, -3.509802, -2.964767, 2, 1, 1.5, 0.5, 0.5, -3.509802, -2.964767, 2, 0, 1.5, 0.5, 0.5 ]); for (var i=0; i<6; i++) for (var j=0; j<4; j++) { ind = 7*(4*i + j) + 3; v[ind+2] = 2*(v[ind]-v[ind+2])*texinfo.widths[i]/width; v[ind+3] = 2*(v[ind+1]-v[ind+3])*texinfo.textHeight/height; v[ind] *= texinfo.widths[i]/texinfo.canvasX; v[ind+1] = 1.0-(texinfo.offset + i*texinfo.skip - v[ind+1]*texinfo.textHeight)/texinfo.canvasY; } var posLoc16 = gl.getAttribLocation(prog16, "aPos"); var colLoc16 = gl.getAttribLocation(prog16, "aCol"); var f=new Uint16Array([ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23 ]); var buf16 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf16); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var ibuf16 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf16); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, f, gl.STATIC_DRAW); var mvMatLoc16 = gl.getUniformLocation(prog16,"mvMatrix"); var prMatLoc16 = gl.getUniformLocation(prog16,"prMatrix"); // ****** lines object 17 ****** var prog17 = gl.createProgram(); gl.attachShader(prog17, getShader( gl, "vshader17" )); gl.attachShader(prog17, getShader( gl, "fshader17" )); gl.linkProgram(prog17); var v=new Float32Array([ -3.105136, -2.550843, -3.136942, -3.105136, 2.968147, -3.136942, -3.105136, -2.550843, 2.459114, -3.105136, 2.968147, 2.459114, -3.105136, -2.550843, -3.136942, -3.105136, -2.550843, 2.459114, -3.105136, 2.968147, -3.136942, -3.105136, 2.968147, 2.459114, -3.105136, -2.550843, -3.136942, 2.290411, -2.550843, -3.136942, -3.105136, -2.550843, 2.459114, 2.290411, -2.550843, 2.459114, -3.105136, 2.968147, -3.136942, 2.290411, 2.968147, -3.136942, -3.105136, 2.968147, 2.459114, 2.290411, 2.968147, 2.459114, 2.290411, -2.550843, -3.136942, 2.290411, 2.968147, -3.136942, 2.290411, -2.550843, 2.459114, 2.290411, 2.968147, 2.459114, 2.290411, -2.550843, -3.136942, 2.290411, -2.550843, 2.459114, 2.290411, 2.968147, -3.136942, 2.290411, 2.968147, 2.459114 ]); var posLoc17 = gl.getAttribLocation(prog17, "aPos"); var colLoc17 = gl.getAttribLocation(prog17, "aCol"); var buf17 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf17); gl.bufferData(gl.ARRAY_BUFFER, v, gl.STATIC_DRAW); var mvMatLoc17 = gl.getUniformLocation(prog17,"mvMatrix"); var prMatLoc17 = gl.getUniformLocation(prog17,"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 = 5.090687; 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( 0.4073621, -0.2086519, 0.3389142 ); mvMatrix.scale( 1.020128, 0.9973112, 0.9835768 ); 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, 0, 0, 0, 1 ); gl.vertexAttribPointer(posLoc6, 3, gl.FLOAT, false, 12, 0); gl.drawArrays(gl.POINTS, 0, 100); // ****** text object 8 ******* gl.useProgram(prog8); gl.bindBuffer(gl.ARRAY_BUFFER, buf8); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf8); gl.uniformMatrix4fv( prMatLoc8, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc8, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc8 ); gl.disableVertexAttribArray( colLoc8 ); gl.vertexAttrib4f( colLoc8, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc8 ); gl.vertexAttribPointer(texLoc8, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture8); gl.uniform1i( sampler8, 0); gl.enableVertexAttribArray( ofsLoc8 ); gl.vertexAttribPointer(ofsLoc8, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc8, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); // ****** text object 9 ******* gl.useProgram(prog9); gl.bindBuffer(gl.ARRAY_BUFFER, buf9); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf9); gl.uniformMatrix4fv( prMatLoc9, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc9, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc9 ); gl.disableVertexAttribArray( colLoc9 ); gl.vertexAttrib4f( colLoc9, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc9 ); gl.vertexAttribPointer(texLoc9, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture9); gl.uniform1i( sampler9, 0); gl.enableVertexAttribArray( ofsLoc9 ); gl.vertexAttribPointer(ofsLoc9, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc9, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); // ****** text object 10 ******* gl.useProgram(prog10); gl.bindBuffer(gl.ARRAY_BUFFER, buf10); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf10); gl.uniformMatrix4fv( prMatLoc10, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc10, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc10 ); gl.disableVertexAttribArray( colLoc10 ); gl.vertexAttrib4f( colLoc10, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc10 ); gl.vertexAttribPointer(texLoc10, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture10); gl.uniform1i( sampler10, 0); gl.enableVertexAttribArray( ofsLoc10 ); gl.vertexAttribPointer(ofsLoc10, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc10, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); // ****** lines object 11 ******* gl.useProgram(prog11); gl.bindBuffer(gl.ARRAY_BUFFER, buf11); gl.uniformMatrix4fv( prMatLoc11, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc11, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc11 ); gl.disableVertexAttribArray( colLoc11 ); gl.vertexAttrib4f( colLoc11, 0, 0, 0, 1 ); gl.lineWidth( 1 ); gl.vertexAttribPointer(posLoc11, 3, gl.FLOAT, false, 12, 0); gl.drawArrays(gl.LINES, 0, 14); // ****** text object 12 ******* gl.useProgram(prog12); gl.bindBuffer(gl.ARRAY_BUFFER, buf12); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf12); gl.uniformMatrix4fv( prMatLoc12, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc12, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc12 ); gl.disableVertexAttribArray( colLoc12 ); gl.vertexAttrib4f( colLoc12, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc12 ); gl.vertexAttribPointer(texLoc12, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture12); gl.uniform1i( sampler12, 0); gl.enableVertexAttribArray( ofsLoc12 ); gl.vertexAttribPointer(ofsLoc12, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc12, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); // ****** lines object 13 ******* gl.useProgram(prog13); gl.bindBuffer(gl.ARRAY_BUFFER, buf13); gl.uniformMatrix4fv( prMatLoc13, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc13, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc13 ); gl.disableVertexAttribArray( colLoc13 ); gl.vertexAttrib4f( colLoc13, 0, 0, 0, 1 ); gl.lineWidth( 1 ); gl.vertexAttribPointer(posLoc13, 3, gl.FLOAT, false, 12, 0); gl.drawArrays(gl.LINES, 0, 12); // ****** text object 14 ******* gl.useProgram(prog14); gl.bindBuffer(gl.ARRAY_BUFFER, buf14); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf14); gl.uniformMatrix4fv( prMatLoc14, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc14, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc14 ); gl.disableVertexAttribArray( colLoc14 ); gl.vertexAttrib4f( colLoc14, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc14 ); gl.vertexAttribPointer(texLoc14, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture14); gl.uniform1i( sampler14, 0); gl.enableVertexAttribArray( ofsLoc14 ); gl.vertexAttribPointer(ofsLoc14, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc14, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 30, gl.UNSIGNED_SHORT, 0); // ****** lines object 15 ******* gl.useProgram(prog15); gl.bindBuffer(gl.ARRAY_BUFFER, buf15); gl.uniformMatrix4fv( prMatLoc15, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc15, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc15 ); gl.disableVertexAttribArray( colLoc15 ); gl.vertexAttrib4f( colLoc15, 0, 0, 0, 1 ); gl.lineWidth( 1 ); gl.vertexAttribPointer(posLoc15, 3, gl.FLOAT, false, 12, 0); gl.drawArrays(gl.LINES, 0, 14); // ****** text object 16 ******* gl.useProgram(prog16); gl.bindBuffer(gl.ARRAY_BUFFER, buf16); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf16); gl.uniformMatrix4fv( prMatLoc16, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc16, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc16 ); gl.disableVertexAttribArray( colLoc16 ); gl.vertexAttrib4f( colLoc16, 0, 0, 0, 1 ); gl.enableVertexAttribArray( texLoc16 ); gl.vertexAttribPointer(texLoc16, 2, gl.FLOAT, false, 28, 12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture16); gl.uniform1i( sampler16, 0); gl.enableVertexAttribArray( ofsLoc16 ); gl.vertexAttribPointer(ofsLoc16, 2, gl.FLOAT, false, 28, 20); gl.vertexAttribPointer(posLoc16, 3, gl.FLOAT, false, 28, 0); gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); // ****** lines object 17 ******* gl.useProgram(prog17); gl.bindBuffer(gl.ARRAY_BUFFER, buf17); gl.uniformMatrix4fv( prMatLoc17, false, new Float32Array(prMatrix.getAsArray()) ); gl.uniformMatrix4fv( mvMatLoc17, false, new Float32Array(mvMatrix.getAsArray()) ); gl.enableVertexAttribArray( posLoc17 ); gl.disableVertexAttribArray( colLoc17 ); gl.vertexAttrib4f( colLoc17, 0, 0, 0, 1 ); gl.lineWidth( 1 ); gl.vertexAttribPointer(posLoc17, 3, gl.FLOAT, false, 12, 0); gl.drawArrays(gl.LINES, 0, 24); 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>