31:Tb46,boxGeometry = function (size = [1,1,1], center = [0,0,0]) { let [width,height,depth] = size; let [cx,cy,cz] = center; let [x,y,z] = [-width/2+cx,-height/2+cy,-depth/2+cz]; let fbl = {x: x, y: y, z: z + depth}; let fbr = {x: x + width, y: y, z: z + depth}; let ftl = {x: x, y: y + height, z: z + depth}; let ftr = {x: x + width, y: y + height, z: z + depth}; let bbl = {x: x, y: y, z: z }; let bbr = {x: x + width, y: y, z: z }; let btl = {x: x, y: y + height, z: z }; let btr = {x: x + width, y: y + height, z: z }; let positions = new Float32Array([ //front fbl.x, fbl.y, fbl.z, fbr.x, fbr.y, fbr.z, ftl.x, ftl.y, ftl.z, ftl.x, ftl.y, ftl.z, fbr.x, fbr.y, fbr.z, ftr.x, ftr.y, ftr.z, //right fbr.x, fbr.y, fbr.z, bbr.x, bbr.y, bbr.z, ftr.x, ftr.y, ftr.z, ftr.x, ftr.y, ftr.z, bbr.x, bbr.y, bbr.z, btr.x, btr.y, btr.z, //back fbr.x, bbr.y, bbr.z, bbl.x, bbl.y, bbl.z, btr.x, btr.y, btr.z, btr.x, btr.y, btr.z, bbl.x, bbl.y, bbl.z, btl.x, btl.y, btl.z, //left bbl.x, bbl.y, bbl.z, fbl.x, fbl.y, fbl.z, btl.x, btl.y, btl.z, btl.x, btl.y, btl.z, fbl.x, fbl.y, fbl.z, ftl.x, ftl.y, ftl.z, //top ftl.x, ftl.y, ftl.z, ftr.x, ftr.y, ftr.z, btl.x, btl.y, btl.z, btl.x, btl.y, btl.z, ftr.x, ftr.y, ftr.z, btr.x, btr.y, btr.z, //bottom bbl.x, bbl.y, bbl.z, bbr.x, bbr.y, bbr.z, fbl.x, fbl.y, fbl.z, fbl.x, fbl.y, fbl.z, bbr.x, bbr.y, bbr.z, fbr.x, fbr.y, fbr.z ]); let uvs = new Float32Array([ //front 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, //right 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, //back 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, //left 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, //top 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, //bottom 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1 ]); let normals = new Float32Array([ // front 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // right 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // back 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, // left -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, // top 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // bottom 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0 ]); return { positions, normals, uvs } }32:T4c2,drawBox = regl({ frag: ` precision mediump float; uniform vec4 color; varying vec3 vertex_normal; uniform vec3 light_dir; void main () { gl_FragColor = vec4(clamp(color.xyz*dot(vertex_normal,light_dir),0.0,1.0),1.0); //gl_FragColor = vec4(vec3(gl_FragCoord.z),1.0); }`, vert: ` attribute vec3 position; attribute vec3 normal; varying vec3 vertex_normal; uniform mat4 modelview; uniform mat4 projection; void main () { vec4 worldpos = modelview*vec4(position, 1.0); gl_Position = projection*worldpos; vertex_normal = (modelview*vec4(normal,0.0)).xyz; }`, // These are the vertex attributes that will be passed // on to the vertex shader attributes: { position: box.positions, normal: box.normals }, // These are the uniforms, i.e., global shader variables that are set // from inside the host (CPU) program uniforms: { color: [1, 1, 1, 1], light_dir : vec3.normalize([], vec3.set ([],1,1,1)), modelview : regl.prop('modelview'), projection : regl.prop ('projection') }, // The depth buffer depth: { enable: true, func: '<', mask: true, }, // Number of triangles count: box.positions.length/3 })33:T13ca,Transform = { const deg = Math.PI / 180; class Transform { constructor (callback = (t) => {}) { this.callback = callback; this.matrices = []; this.sliders = []; } reset () { this.matrices = []; this.sliders = []; this.callback(this); return this } addTranslate () { let i = this.matrices.length; this.matrices.push (mat4.create()) this.sliders.push (XYZSlider({title : "Translate ", min:-2, max:2, step:0.1, value:[0,0,0], callback : t => { this.matrices[i] = mat4.fromTranslation([],t); this.callback(this) }})); return this; } addScale() { let i = this.matrices.length; this.matrices.push (mat4.create()) this.sliders.push (XYZSlider({title : "Scale ", min:-4, max:4, step:0.1, value:[1,1,1], callback: s => { this.matrices[i] = mat4.fromScaling([],s); this.callback(this) }})); return this; } addRotate() { let i = this.matrices.length; this.matrices.push (mat4.create()) this.sliders.push (XYZSlider({title : "Rotate ", min:-180, max:180, step:1, value:[0,0,0], callback: r => { this.matrices[i] = // mat4.fromZRotation([], r[2]*deg) mat4.rotateX([], mat4.rotateY([], mat4.fromZRotation([],r[2]*deg), r[1]*deg), r[0]*deg); this.callback(this) }})) return this; } addLookAt() { let i = this.matrices.length; this.matrices.push (mat4.create()); let eye = [0,0,5], center = [0,0,0], up = [0,1,0]; let cb = () => { this.matrices[i] = mat4.lookAt([], eye, center, up); this.callback(this) }; this.sliders.push (XYZSlider({title : "LookAt Eye ", min:-5, max:5, step:0.1, value:eye, callback: r => { eye = r; cb() }})) this.sliders.push (XYZSlider({title : "LookAt Center ", min:-5, max:5, step:0.1, value:center, callback: r => { center = r; cb() }})) this.sliders.push (XYZSlider({title : "LookAt Up ", min:-5, max:5, step:0.1, value:up, callback: r => { up = r; cb() }})) cb() return this } addPerspective() { let i = this.matrices.length; this.matrices.push (mat4.create()); let fovy = 40, aspect = 1, zrange = [0.01,100]; let cb = () => { this.matrices[i] = mat4.perspective([], fovy*deg, aspect, zrange[0],zrange[1]); this.callback(this) }; this.sliders.push (Slider({title : "Fovy ", min:1, max:90, step:1, value:fovy, callback: r => { fovy = r; cb() }})) this.sliders.push (Slider({title : "Aspect ", min:0.5, max:2, step:0.1, value:aspect, callback: r => { aspect = r; cb() }})) this.sliders.push (RangeSlider({labels : ["Near","Far"], min:-5, max:10, step:0.1, value:zrange, callback: r => { zrange = r; cb() }})) cb() return this } addOrtho () { let i = this.matrices.length; this.matrices.push (mat4.create()); let xrange = [-1,1], yrange=[-1,1], zrange = [-1,1]; let cb = () => { this.matrices[i] = mat4.ortho([], xrange[0], xrange[1], yrange[0], yrange[1], zrange[0], zrange[1]); this.callback(this) } this.sliders.push (RangeSlider({labels : ["Left","Right"], min:-5, max:5, step:0.1, value:[-1,1], callback: r => { xrange = r; cb() }})); this.sliders.push (RangeSlider({labels : ["Bottom","Top"], min:-5, max:5, step:0.1, value:[-1,1], callback: r => { yrange = r; cb() }})); this.sliders.push (RangeSlider({labels : ["Near","Far"], min:-5, max:10, step:0.1, value:zrange, callback: r => { zrange = r; cb() }})); cb() return this } UI () { let ui = html`

`; for (let slider of this.sliders) { ui.append(slider) ui.append(html`
`) } return ui } matrix() { if (this.matrices.length == 0) return mat4.create() if (this.matrices.length == 1) return this.matrices[0]; return this.matrices.reduce((a,b) => mat4.mul([],a,b)) } tex() { let result = html`

`; if (this.matrices.length < 2) result.append(tex`${matrixTex(this.matrix())}`); else result.append(tex`${(this.matrices.map(matrixTex)).join("\\times")+"="+matrixTex(this.matrix())}`); return result; } } return Transform } 34:T470,ProjectionUI = function () { let T = new Transform(); let buttons = html`

`; let UI = html`

`; let tex = html`

`; tex.append(T.tex()); let V = html`

`; V.append(buttons,UI,tex); V.value = T.matrix(); T.callback = () => { var event = new Event('change'); tex.removeChild(tex.children[0]) tex.append(T.tex()) V.value = T.matrix(); V.dispatchEvent(new CustomEvent("input", { bubbles: true })) } let refreshUI = () => { UI.innerHTML=``; UI.append(T.UI()); T.callback() }; let select = html``; let projType = "P"; let reset = () => { T.reset(); if (projType == "P") T.addPerspective(); else T.addOrtho(); refreshUI(); } select.onchange = () => {projType = select.value; reset()}; let resetButton = html``; resetButton.onclick = reset; buttons.append(select,resetButton); UI.append(T.UI()); reset() return V }35:T457,TransformUI = function () { let T = new Transform(); let buttons = html`

`; let UI = html`

`; let tex = html`

`; tex.append(T.tex()); let V = html`

`; V.append(buttons,UI,tex); V.value = T.matrix(); T.callback = () => { var event = new Event('change'); tex.removeChild(tex.children[0]) tex.append(T.tex()) V.value = T.matrix(); V.dispatchEvent(new CustomEvent("input", { bubbles: true })) } let refreshUI = () => { UI.innerHTML=``; UI.append(T.UI()); T.callback() }; let reset = html``; reset.onclick = () => {T.reset(); refreshUI()}; let translate = html``; translate.onclick = () => { T.addTranslate(), refreshUI() } let scale = html``; scale.onclick = () => {T.addScale(), refreshUI()}; let rotate = html``; rotate.onclick = () => {T.addRotate(), refreshUI()}; buttons.append(translate,scale,rotate,reset) UI.append(T.UI()); return V }36:[] 2f:{"title":"Model, View and Projection Demo","cells":[{"id":0,"value":"md`# Model, View and Projection Demo\n\nA simple WebGL demo for helping understand how to set up a viewing frustum.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"canvas = html`