25:["$","title",null,{"children":"WebGL Helpers | Anand Thakker | Observable"}] 4b:T1647,createCamera = { // https://github.com/regl-project/regl-camera/blob/master/regl-camera.js const {identity, perspective, lookAt} = mat4; var isBrowser = typeof window !== 'undefined' function createCamera (regl, props_) { var props = props_ || {} // Preserve backward-compatibilty while renaming preventDefault -> noScroll if (typeof props.noScroll === 'undefined') { props.noScroll = props.preventDefault; } var cameraState = window.cameraState = { view: identity(new Float32Array(16)), projection: identity(new Float32Array(16)), center: new Float32Array(props.center || 3), theta: props.theta || 0, phi: props.phi || 0, distance: Math.log(props.distance || 10.0), eye: new Float32Array(3), up: new Float32Array(props.up || [0, 1, 0]), fovy: props.fovy || Math.PI / 4.0, near: typeof props.near !== 'undefined' ? props.near : 0.01, far: typeof props.far !== 'undefined' ? props.far : 1000.0, noScroll: typeof props.noScroll !== 'undefined' ? props.noScroll : false, flipY: !!props.flipY, dtheta: 0, dphi: 0, rotationSpeed: typeof props.rotationSpeed !== 'undefined' ? props.rotationSpeed : 1, zoomSpeed: typeof props.zoomSpeed !== 'undefined' ? props.zoomSpeed : 1, renderOnDirty: typeof props.renderOnDirty !== undefined ? !!props.renderOnDirty : false } var element = props.element var damping = typeof props.damping !== 'undefined' ? props.damping : 0.9 var right = new Float32Array([1, 0, 0]) var front = new Float32Array([0, 0, 1]) var minDistance = Math.log('minDistance' in props ? props.minDistance : 0.1) var maxDistance = Math.log('maxDistance' in props ? props.maxDistance : 1000) var ddistance = 0 var prevX = 0 var prevY = 0 if (isBrowser && props.mouse !== false) { var source = element || regl._gl.canvas function getWidth () { return element ? element.offsetWidth : window.innerWidth } function getHeight () { return element ? element.offsetHeight : window.innerHeight } mouseChange(source, function (buttons, x, y) { if (buttons & 1) { var dx = (x - prevX) / getWidth() var dy = (y - prevY) / getHeight() cameraState.dtheta += cameraState.rotationSpeed * 4.0 * dx cameraState.dphi += cameraState.rotationSpeed * 4.0 * dy cameraState.dirty = true; } prevX = x prevY = y }) mouseWheel(source, function (dx, dy) { ddistance += dy / getHeight() * cameraState.zoomSpeed cameraState.dirty = true; }, props.noScroll) } function damp (x) { var xd = x * damping if (Math.abs(xd) < 0.1) { return 0 } cameraState.dirty = true; return xd } function clamp (x, lo, hi) { return Math.min(Math.max(x, lo), hi) } function updateCamera (props) { Object.keys(props).forEach(function (prop) { cameraState[prop] = props[prop] }) var center = cameraState.center var eye = cameraState.eye var up = cameraState.up var dtheta = cameraState.dtheta var dphi = cameraState.dphi const previous = { theta: cameraState.theta, phi: cameraState.phi, distance: cameraState.distance }; cameraState.theta += dtheta cameraState.phi = clamp( cameraState.phi + dphi, -Math.PI / 2.0, Math.PI / 2.0) cameraState.distance = clamp( cameraState.distance + ddistance, minDistance, maxDistance) cameraState.dtheta = damp(dtheta) cameraState.dphi = damp(dphi) ddistance = damp(ddistance) var theta = cameraState.theta var phi = cameraState.phi var r = Math.exp(cameraState.distance) var vf = r * Math.sin(theta) * Math.cos(phi) var vr = r * Math.cos(theta) * Math.cos(phi) var vu = r * Math.sin(phi) for (var i = 0; i < 3; ++i) { eye[i] = center[i] + vf * front[i] + vr * right[i] + vu * up[i] } if (cameraState.dirty && props_.log) { console.log('camera', cameraState) } lookAt(cameraState.view, eye, center, up) } cameraState.dirty = true; var injectContext = regl({ context: Object.assign({}, cameraState, { dirty: function () { return cameraState.dirty; }, projection: function (context) { perspective(cameraState.projection, cameraState.fovy, context.viewportWidth / context.viewportHeight, cameraState.near, cameraState.far) if (cameraState.flipY) { cameraState.projection[5] *= -1 } return cameraState.projection } }), uniforms: Object.keys(cameraState).reduce(function (uniforms, name) { uniforms[name] = regl.context(name) return uniforms }, {}) }) function setupCamera (props, block) { if (typeof setupCamera.dirty !== 'undefined') { cameraState.dirty = setupCamera.dirty || cameraState.dirty setupCamera.dirty = undefined; } if (props && block) { cameraState.dirty = true; } if (cameraState.renderOnDirty && !cameraState.dirty) return; if (!block) { block = props props = {} } updateCamera(props) injectContext(block) cameraState.dirty = false; } Object.keys(cameraState).forEach(function (name) { setupCamera[name] = cameraState[name] }) return setupCamera } return createCamera; }4c:[{"id":"d882a05f0de92ac8294eeb5671f162293c72ef7bcbbfcca3d0a5c9c7f8d8efb491bcec8df2e314a27cb7b9bb13b97eb7ccfe510b93d86d2c0561047145cd9ef1","href":"https://static.observableusercontent.com/files/d882a05f0de92ac8294eeb5671f162293c72ef7bcbbfcca3d0a5c9c7f8d8efb491bcec8df2e314a27cb7b9bb13b97eb7ccfe510b93d86d2c0561047145cd9ef1","name":"bundle@1.js","type":"application/javascript","lastModified":1616503538994.001,"size":426538},{"id":"cb62411c2fce5a193d835f0e5983f317d6b7c77d4a0b13b2ba03a27aec9f60fb89c1664eb60abad50260e39cb730ffbdeb8ea08e2886808406aad238829fae5c","href":"https://static.observableusercontent.com/files/cb62411c2fce5a193d835f0e5983f317d6b7c77d4a0b13b2ba03a27aec9f60fb89c1664eb60abad50260e39cb730ffbdeb8ea08e2886808406aad238829fae5c","name":"mouse-change-bundle.js","type":"application/javascript","lastModified":1616517352963.531,"size":6930},{"id":"8c821aea7bbfd5d0cd332872e44b53cf12360b6554481254d2054c2cc2962247e867458962f6ff57eac90b7f1151386724315c6faae22eb6fc69cd7dec6cc00b","href":"https://static.observableusercontent.com/files/8c821aea7bbfd5d0cd332872e44b53cf12360b6554481254d2054c2cc2962247e867458962f6ff57eac90b7f1151386724315c6faae22eb6fc69cd7dec6cc00b","name":"mouse-wheel-bundle.js","type":"application/javascript","lastModified":1616517289589.011,"size":3968}] 47:{"id":"95cea8752e9a3815","slug":"webgl-helpers","title":"WebGL Helpers","thumbnail":"8e9447e3e812422652a19c5742d039cad4a27c2413a6091cc26d2ddfc34b08e0","access_level":"public","create_time":"$D2021-03-20T13:53:30.330Z","update_time":"$D2021-03-24T13:09:45.101Z","view_time":null,"first_public_time":"$D2021-03-20T13:54:13.843Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":190,"publish_version":190,"role":null,"authored":false,"authors":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebGL Helpers","cells":[{"id":0,"value":"md`# WebGL Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## regl`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Draw = class Draw {\n constructor(specs, options) {\n if (options.regl) {}\n \n if (options.viewport) {\n this.canvas = html`