30:T494,sphereGeometry = function (radius = 1, slices = 20, stacks = 12) { let pos = []; let normal = []; let grid = [] let dphi = Math.PI / stacks; let dtheta = Math.PI * 2 / slices; let sphereCoord = (phi,theta) => [Math.cos(theta)*Math.sin(phi), Math.sin(theta)*Math.sin(phi), Math.cos(phi)]; for (let i = 0, theta = 0; i <= slices; ++i, theta += dtheta) { grid.push([]) for (let j = 0, phi = 0; j <= stacks; ++j, phi += dphi) { grid[i][j] = pos.length; let [x,y,z] = sphereCoord(phi,theta); pos.push([x*radius,y*radius,z*radius]); normal.push([x,y,z]); } } let faceElements = []; let edgeElements = []; let faceNormals = []; for (let i=0; i < slices; ++i) { for (let j=0; j < stacks; j++) { faceElements.push([grid[i][j], grid[i][j+1], grid[i+1][j]]); faceElements.push([grid[i+1][j], grid[i][j+1], grid[i+1][j+1]]); edgeElements.push([grid[i][j], grid[i][j+1]]); edgeElements.push([grid[i][j], grid[i+1][j]]); } } return { pos: pos, normal : normal, faces: faceElements, edges: edgeElements } }31:T498,drawSphere = 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); }`, vert: ` attribute vec3 position; attribute vec3 normal; varying vec3 vertex_normal; uniform mat4 modelview; void main () { gl_Position = modelview*vec4(position, 1.0); vertex_normal = normal; //(modelview*vec4(normal,1.0)).xyz; }`, // These are the vertex attributes that will be passed // on to the vertex shader attributes: { position: sphere.pos, normal: sphere.normal // position: flatSphere.pos, // normal: flatSphere.norm }, // 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 : [0.7,0.7,0.7], modelview : regl.prop('modelview') }, // The depth buffer depth: { enable: true, mask: true, func: '>', range: [0, 1] }, // Indices of vertices to be fed into the pipeline elements: sphere.faces //count: flatSphere.pos.length })32:Tc64,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,1], 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() }})) 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() { if (this.matrices.length < 2) return tex`${matrixTex(this.matrix())}`; return tex`${(this.matrices.map(matrixTex)).join("\\times")+"="+matrixTex(this.matrix())}`; } } return Transform } 33:T4c7,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()}; let lookat = html``; lookat.onclick = () => {T.addLookAt(), refreshUI()}; buttons.append(translate,scale,rotate,lookat,reset) UI.append(T.UI()); return V }34:[] 2e:{"title":"Modelview Demo","cells":[{"id":0,"value":"md`# Modelview Demo\n\nA simple WebGL demo for understanding transformation matrices.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"canvas = html`