2a:null 2b:["$","title",null,{"children":"Genuary 2022 / 3. Space | Zihou Ng | Observable"}] 30:T5eb,class Model { static initAttribs(gl, spec) { const res = {}; for(const name in spec) { let { buffer, data, size = 3, stride = 0, offset = 0 } = spec[name]; if (!buffer) buffer = new Buffer(gl, data); res[name] = { buffer, size, stride, offset }; } return res; } static initIndices(gl, spec) { const buffer = new Buffer(gl, spec.data, gl.ELEMENT_ARRAY_BUFFER); const type = spec.data instanceof Uint32Array ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT; return { buffer, type }; } constructor(gl, spec) { const { shader, attribs, indices, num, mode = gl.TRIANGLES, uniforms = {}, textures = [] } = spec; this.gl = gl; this.shader = shader; if (attribs) { this.attribs = Model.initAttribs(gl, attribs); shader.setup(this.attribs); } this.indices = indices ? Model.initIndices(gl, indices) : undefined; this.textures = textures; this.uniforms = uniforms; this.num = num; this.mode = mode; } bindTextures() { for(let i = 0, n = this.textures.length; i < n; i++) { this.textures[i].bind(i); } } draw(opts = {}) { const { gl, shader, indices, mode, num, uniforms } = this; shader.bind(); shader.setUniforms(uniforms); shader.prepareState(opts.state); this.bindTextures(); if (indices) { const { buffer, type } = indices; buffer.bind(); gl.drawElements(mode, num, type, 0); } else { gl.drawArrays(mode, 0, num); } } }31:T2eb3,Shader = { const setS = fn => (gl, loc, defaultVal = 0) => { let prev; return x => { x = x === undefined ? defaultVal : x; if (x !== prev) { gl[`uniform1${fn}`](loc, x); prev = x; } }; }; const setV = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eq.equivArrayLike(prev, x)) { gl[`uniform${fn}`](loc, x); prev = [...x]; } }; }; const setM = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eq.equivArrayLike(prev, x)) { gl[`uniformMatrix${fn}`](loc, false, x); prev = [...x]; } }; }; const SETTERS = { bool: setS("i"), float: setS("f"), int: setS("i"), uint: setS("ui"), bvec2: setV("2iv", v.ZERO2), bvec3: setV("3iv", v.ZERO3), bvec4: setV("4iv", v.ZERO4), ivec2: setV("2iv", v.ZERO2), ivec3: setV("3iv", v.ZERO3), ivec4: setV("4iv", v.ZERO4), vec2: setV("2fv", v.ZERO2), vec3: setV("3fv", v.ZERO3), vec4: setV("4fv", v.ZERO4), mat2: setM("2fv", m.IDENT22), mat3: setM("3fv", m.IDENT33), mat4: setM("4fv", m.IDENT44), sampler2D: setS("i"), sampler2DShadow: setS("i"), sampler3D: setS("i"), samplerCube: setS("i"), samplerCubeShadow: setS("i") }; const makeUniformSetter = (gl, program, name, type, defaultVal = undefined) => { const loc = gl.getUniformLocation(program, name); return SETTERS[type](gl, loc, defaultVal); }; const getType = type => { const m = type.match(/(\w+)(?:\[(\d+)\])/); if (m) return [m[1], parseInt(m[2])]; return [type, 0]; }; const makeFieldName = path => { let res = ""; for(let i = 0, n = path.length; i < n; i++) { if (Number.isInteger(path[i])) res += `[${path[i]}]`; else if (path[i].length > 0) { res += `.${path[i]}`; } } return res; }; const getStructFields = (type0, structs) => { const [type, n] = getType(type0); if (!(type in structs)) { if (n > 0) return d3.range(n).map(i => [[i], type]); return [[[''], type]]; } const entries = Object.entries(structs[type] || {}); const res = []; if (n > 0) { for (let i = 0; i < n; i++) { for(const [key, val] of entries) { const [t, _] = getType(val); if (!(t in structs)) res.push([[i, key], t]); else for (const [k, v] of getStructFields(val, structs)) res.push([[i, key].concat(k), v]); } } } else { for(const [key, val] of entries) { const [t, _] = getType(val); if (!(t in structs)) res.push([[key], t]); else for (const [k, v] of getStructFields(val, structs)) res.push([[key].concat(k), v]); } } return res; }; const getVal = (path, val) => { if (path.length == 0) return val; if (path.length == 1 && path[0] === '') return val; return getVal(path.slice(1), val[path[0]]); }; const getDef = def => { let type = def, defaultVal; if (Array.isArray(def)) [type, defaultVal] = def; return [type, defaultVal]; }; const getLocations = (name, def, structs) => { const [type, defaultVal] = getDef(def); const fields = getStructFields(type, structs); const res = []; for (const [path, type] of fields) { const val = defaultVal !== undefined ? getVal(path, defaultVal) : undefined; res.push([`${name}${makeFieldName(path)}`, type, val]); } return res; }; const getAssign = (name, val, types, structs) => { assert(name in types, `Unknown field ${name}`); return getLocations(name, [types[name], val], structs); }; const getDefs = (uniforms, structs) => { const res = []; for (const [k, v] of Object.entries(uniforms)) { res.push(...getLocations(k, v, structs)); } return res; }; const getAssigns = (uniforms, types, structs) => { const res = []; for (const [k, v] of Object.entries(uniforms)) { if (k in types) res.push(...getAssign(k, v, types, structs)); } return res; }; const getTypeInfos = defs => { const res = {}; for (const [k, v] of Object.entries(defs)) { res[k] = Array.isArray(v) ? v[0] : v; } return res; }; const HEADER = ` #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp int; precision highp float; #else precision mediump int; precision mediump float; #endif #ifndef PI #define PI 3.141592653589793 #endif #ifndef TAU #define TAU 6.283185307179586 #endif #ifndef HALF_PI #define HALF_PI 1.570796326794896 #endif #define saturate(a) clamp(a, 0.0, 1.0) `; const isArray = Array.isArray; const arrayDecl = (qualifier, decl, id) => { const type = isArray(decl) ? decl[0] : decl; return type.indexOf("[]") > 0 ? `${qualifier} ${type.replace("[]", "")} ${id}[${decl[1]}];` : `${qualifier} ${type} ${id};`; }; const NO_PREFIXES = { a: "", v: "", u: "", o: "" }; const DEFAULT_OUTPUT = { fragColor: ["vec4", 0] }; const syntax = { attrib: (id, type, pre) => isArray(type) ? `layout(location=${type[1]}) in ${type[0]} ${pre.a}${id};` : `in ${type} ${pre.a}${id};`, varying: { vs: (id, type, pre) => arrayDecl("out", type, pre.v + id), fs: (id, type, pre) => arrayDecl("in", type, pre.v + id), }, uniform: (id, u, pre) => arrayDecl("uniform", u, pre.u + id), output: (id, type, pre) => isArray(type) ? `layout(location=${type[1]}) out ${type[0]} ${pre.o}${id};` : `out ${type} ${pre.o}${id};`, }; const compileStruct = (name, fields) => { let src = `struct ${name} {\n`; for (const key in fields) { src += ` ${fields[key]} ${key};\n`; } return src + "};\n"; }; const compileStructs = structs => Object.entries(structs).map(x => compileStruct(...x)).join("\n"); const compileDefines = defines => defines.map(x => `#define ${x}\n`).join(""); const compileVars = (attribs, syntax, prefixes) => { const decls = []; for (let id in attribs) { if (attribs.hasOwnProperty(id)) { decls.push(syntax(id, attribs[id], prefixes)); } } decls.push(""); return decls.join("\n"); }; const assembleShader = (source, type, opts) => { const { attribs = {}, varying = {}, uniforms = {}, outputs = DEFAULT_OUTPUT, pre, structs = {}, defines = [], declPrefixes = NO_PREFIXES } = opts; const prefixes = { ...NO_PREFIXES, ...declPrefixes }; let src = "#version 300 es\n"; if (pre) src += `${pre}\n`; src += `${HEADER}\n`; src += compileDefines(defines) + "\n"; src += compileStructs(structs) + "\n"; if (type == "vs") src += compileVars(attribs, syntax.attrib, prefixes) + "\n"; else src += compileVars(outputs, syntax.output, prefixes) + "\n"; src += compileVars(varying, syntax.varying[type], prefixes) + "\n"; src += compileVars(uniforms, syntax.uniform, prefixes); src += source; return src ; }; const compileProgram = (gl, vs, fs) => { const program = gl.createProgram(); gl.attachShader(program, compileShader(gl, "vs", vs)); gl.attachShader(program, compileShader(gl, "fs", fs)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { const msg = gl.getProgramInfoLog(program); gl.deleteProgram(program); throw new Error(`Couldn't link shader: ${msg}`); } return program; }; const compileShader = (gl, type, source) => { assert(type == "vs" || type == "fs", "type should be `vs` or `fs`"); const shaderType = type == 'vs' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER; const shader = gl.createShader(shaderType); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { const msg = gl.getShaderInfoLog(shader); gl.deleteShader(shader); throw new Error(`Error compiling shader: ${msg}`); } return shader; }; return class { constructor(gl, spec) { this.gl = gl; const opts = { attribs: spec.attribs, varying: spec.varying, uniforms: spec.uniforms || {}, outputs: spec.outputs, structs: spec.structs || {}, defines: spec.defines || [], declPrefixes: spec.declPrefixes }; this.vs = assembleShader(spec.vs, "vs", opts); this.fs = assembleShader(spec.fs, "fs", opts); this.program = compileProgram(gl, this.vs, this.fs); this.initUniforms(opts.uniforms, opts.structs); this.state = spec.state || {}; } initUniforms(uniforms, structs) { const gl = this.gl; const specs = getDefs(uniforms, structs); this.gl.useProgram(this.program); this.uniformSetters = {}; for (const [name, type, defaultVal] of specs) { const setter = makeUniformSetter(gl, this.program, name, type, defaultVal); this.uniformSetters[name] = setter; setter(); } this.uniformTypes = getTypeInfos(uniforms); this.structs = structs; } bind() { assert(this.program, "program already released"); this.gl.useProgram(this.program); this.vao && this.gl.bindVertexArray(this.vao); } unbind() { this.gl.useProgram(null); this.vao && this.gl.bindVertexArray(null); } makeVAO(attribs) { const { gl, program } = this; const vao = gl.createVertexArray(); gl.bindVertexArray(vao); for(const name in attribs) { const { buffer, size, stride, offset } = attribs[name]; buffer.bind(); const loc = gl.getAttribLocation(program, name); assert(loc >= 0, `Unknown attribute: ${name}`); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, size, gl.FLOAT, false, stride, offset); buffer.unbind(); } gl.bindVertexArray(null); return vao; } setup(attribs) { this.vao = this.makeVAO(attribs); return this; } releaseVAO() { if (this.vao) { this.gl.deleteVertexArray(this.vao); delete this.vao; } } setUniforms(vals) { const assigns = getAssigns(vals, this.uniformTypes, this.structs); const setters = this.uniformSetters; for (const [field, _, val] of assigns) { if (!(field in setters)) continue; setters[field](val); } } release() { if (this.program) { this.gl.deleteProgram(this.program); delete this.program; this.releaseVAO(); return true; } return false; } setState(id, val) { if (val) { this.gl.enable(id); } else { this.gl.disable(id); } } prepareState(state = this.state) { const gl = this.gl; state.depth !== undefined && this.setState(gl.DEPTH_TEST, state.depth); if (state.cull !== undefined) { this.setState(gl.CULL_FACE, state.cull); state.cullMode && gl.cullFace(state.cullMode); } if (state.blend !== undefined) { this.setState(gl.BLEND, state.blend); state.blendFn && gl.blendFunc(state.blendFn[0], state.blendFn[1]); state.blendEq !== undefined && gl.blendEquation(state.blendEq); } if (state.stencil !== undefined) { this.setState(gl.STENCIL_TEST, state.stencil); state.stencilFn && gl.stencilFunc(state.stencilFn[0], state.stencilFn[1], state.stencilFn[2]); state.stencilOp && gl.stencilOp(state.stencilOp[0], state.stencilOp[1], state.stencilOp[2]); state.stencilMask !== undefined && gl.stencilMask(state.stencilMask); } } }}32:T125d,class Texture { static makeCubemap(gl, faces, opts = {}) { const texture = new Texture(gl, { ...opts, target: gl.TEXTURE_CUBE_MAP, mipmap: false, }); for(let i = 0; i < 6; i++) { const target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + i; const data = faces ? faces[i] : null; if (data) gl.texImage2D(target, 0, texture.internalFormat, texture.format, texture.type, data); else { gl.texImage2D(target, 0, texture.internalFormat, opts.width, opts.height, 0, texture.format, texture.type, data); } } opts.mipmap && texture.generateMipmap(); return texture; } static fromImage(gl, image, opts = {}) { opts = { width: image.width, height: image.height, image, filter: [gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR], mipmap: true, anisotropy: true, ...opts }; return new Texture(gl, opts); } constructor(gl, opts) { this.gl = gl; this.tex = gl.createTexture(); this.target = opts.target || gl.TEXTURE_2D; this.format = opts.format || gl.RGBA; this.internalFormat = opts.internalFormat || gl.RGBA; this.type = opts.type || gl.UNSIGNED_BYTE; this.unpackAlignment = opts.unpackAlignment; this.configure(opts); if (opts.width && opts.height) this.size = [opts.width, opts.height]; } configure(opts) { const { gl, target } = this; gl.bindTexture(this.target, this.tex); opts.unpackAlignment !== undefined && gl.pixelStorei(gl.UNPACK_ALIGNMENT, opts.unpackAlignment); opts.flip !== undefined && gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, opts.flip ? true : false); gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); this.configureFilter(opts); this.configureWrap(opts); if (opts.immutable === true) this.configureStorage(opts); else this.configureImage(opts); this.configureAnisotropy(opts); opts.mipmap && this.generateMipmap(); } configureStorage(opts) { const { gl, format, type } = this; const { width, height, image, levels = 1, immutable = false } = opts; this.immutable = immutable; this.levels = levels; if (width && height) { gl.texStorage2D(gl.TEXTURE_2D, levels, this.internalFormat, width, height); if (image !== undefined) gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, format, type, image); } } configureImage(opts) { if (opts.image === undefined) return; // 2D const { width, height, image, level = 0 } = opts; const { gl, target, type, format, internalFormat, size } = this; if (width && height) { gl.texImage2D(target, level, internalFormat, width, height, 0, format, type, image); } else gl.texImage2D(target, level, internalFormat, format, type, image); } configureFilter(opts) { const { gl, target, } = this; const flt = opts.filter || gl.NEAREST; let t1, t2; if (Array.isArray(flt)) { t1 = flt[0]; t2 = flt[1] || t1; this.filter = [t1, t2]; } else { this.filter = [flt, flt, flt]; t1 = t2 = flt; } gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, t1); gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, t2); } configureWrap(opts) { const { gl, target } = this; const wrap = opts.wrap || gl.CLAMP_TO_EDGE; let t1, t2, t3; if (Array.isArray(wrap)) { t1 = wrap[0]; t2 = wrap[1] || t1; t3 = wrap[2] || t1; this.wrap = [t1, t2, t3]; } else { t1 = t2 = t3 = wrap; this.wrap = [wrap, wrap, wrap]; } gl.texParameteri(target, gl.TEXTURE_WRAP_S, t1); gl.texParameteri(target, gl.TEXTURE_WRAP_T, t2); } configureAnisotropy(opts) { if (opts.anisotropy !== true) return; const { gl, target } = this; const ext = ensureExtension(gl, "EXT_texture_filter_anisotropic"); if (gl.maxAnisotropy === undefined) gl.maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT) gl.texParameterf(target, ext.TEXTURE_MAX_ANISOTROPY_EXT, gl.maxAnisotropy); } bind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, this.tex); return true; } unbind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, null); return true; } release() { if (this.tex) { this.gl.deleteTexture(this.tex); delete this.tex; delete this.gl; return true; } return false; } generateMipmap() { this.gl.generateMipmap(this.target); } }33:Tb2b,class FBO { constructor(gl, opts = {}) { this.gl = gl; this.fbo = gl.createFramebuffer(); this.bind(); opts.drawBuffers && this.setupDrawBuffers(opts.drawBuffers); opts.renderBuffers && this.setupRenderBuffers(opts.renderBuffers); if (opts.drawBuffers || opts.renderBuffers) this.validate(); } setupDrawBuffers(drawBuffers = []) { const gl = this.gl; const attachments = []; for (let i = 0, n = drawBuffers.length; i < n; i++) { const tex = drawBuffers[i].tex; const attach = gl.COLOR_ATTACHMENT0 + i; gl.framebufferTexture2D(gl.FRAMEBUFFER, attach, gl.TEXTURE_2D, tex, 0); attachments.push(attach); } gl.drawBuffers(attachments); } setupRenderBuffers(renderBuffers) { const gl = this.gl; for (const renderBuffer of renderBuffers) { const attachment = renderBuffer.attachment || gl.DEPTH_ATTACHMENT; if (renderBuffer.target instanceof RBO) { gl.framebufferRenderbuffer( gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, renderBuffer.target.buffer) } else { gl.framebufferTexture2D( gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, renderBuffer.target.tex, 0 ); } } } bind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.fbo); return true; } unbind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null); return true; } blit(fboR, opts = {}) { const { gl, fbo } = this; const { width = gl.drawingBufferWidth, height = gl.drawingBufferHeight, mask = gl.COLOR_BUFFER_BIT, filter = gl.NEAREST } = opts; gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fboR.fbo); gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo); gl.clearBufferfv(gl.COLOR, 0, [0, 0, 0, 0]); gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, mask, filter ); } release() { if (this.fbo) { this.gl.deleteFramebuffer(this.fbo); delete this.fbo; return true; } return false; } validate() { const gl = this.gl; const err = gl.checkFramebufferStatus(gl.FRAMEBUFFER); switch (err) { case gl.FRAMEBUFFER_COMPLETE: return true; case gl.FRAMEBUFFER_UNSUPPORTED: throw new Error("FBO unsupported"); case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: throw new Error("FBO incomplete attachment"); case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: throw new Error("FBO incomplete dimensions"); case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: throw new Error("FBO incomplete missing attachment"); case gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE: throw new Error("FBO incomplete multisample"); default: throw new Error(`FBO error: ${err}`); } } }34:T42e,class Multisample { constructor(gl, samples = gl.getParameter(gl.MAX_SAMPLES)) { this.output = new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.RGBA, format: gl.RGBA, type: gl.UNSIGNED_BYTE, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }); this.fbos = { draw: new FBO(gl, { renderBuffers: [{ target: new RBO(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, samples, format: gl.RGBA8 }), attachment: gl.COLOR_ATTACHMENT0 }, { target: new RBO(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, samples }) }] }), read: new FBO(gl, { drawBuffers: [this.output] }) }; } draw(render) { this.fbos.draw.bind(); render(); this.fbos.draw.unbind(); this.fbos.read.blit(this.fbos.draw); this.fbos.read.unbind(); } }35:T121b,CAMERA = { class Frustum { constructor(left, right, bottom, top, near, far) { Object.defineProperties(this, { _left: { value: left, writable: true }, _right: { value: right, writable: true }, _bottom: { value: bottom, writable: true }, _top: { value: top, writable: true }, _near: { value: near, writable: true }, _far: { value: far, writable: true }, }); this._dirty = true; } get left() { return this._left; } set left(val) { this._left = val; this._dirty = true; } get right() { return this._right; } set right(val) { this._right = val; this._dirty = true; } get bottom() { return this._bottom; } set bottom(val) { this._bottom = val; this._dirty = true; } get top() { return this._top; } set top(val) { this._top = val; this._dirty = true; } get near() { return this._near; } set near(val) { this._near = val; this._dirty = true; } get far() { return this._far; } set far(val) { this._far = val; this._dirty = true; } clone() { return new Frustum(this.left, this.right, this.bottom, this.top, this.near, this.far); } } class Perspective { constructor(fov, aspect, near, far) { const f = m.frustumBounds(fov, aspect, near, far); this.frustum = new Frustum(f.left, f.right, f.bottom, f.top, f.near, f.far); Object.defineProperties(this, { _matrix: { value: [] } }); } get matrix() { const f = this.frustum; if (f._dirty) { f._dirty = false; m.frustum(this._matrix, f.left, f.right, f.bottom, f.top, f.near, f.far); } return this._matrix; } } class Camera { constructor(opts) { const { eye, target = v.ZERO3, up = v.Y3, projection } = opts; this.eye = eye; this.target = v.copy(target); this.up = v.copy(up); this.projection = projection; this._dirty = true; Object.defineProperties(this, { _view: { value: [] } }); } get view() { if (!this._dirty) return this._view; this._dirty = false; return m.lookAt(this._view, this.eye, this.target, this.up); } get proj() { return this.projection.matrix; } } class Rig { constructor(camera, opts) { const { viewport } = opts; this.viewport = viewport; this.camera = camera; Object.defineProperties(this, { _radius: { value: Math.min(...viewport), writable: true }, _center: { value: v.mulN([], viewport, 0.5), writable: true }, _eye: { value: v.copy(camera.eye), writable: true }, _up0: { value: v.copy(camera.up), writable: true }, _target: { value: v.copy(camera.target), writable: true }, _up: { value: [] }, _viewDir: { value: [] }, _down: { value: [] }, _delta: { value: [] }, _side: { value: [] }, _axis: { value: [] }, _vd: { value: [] }, _rot: { value: [] }, _grabEye: { value: [] }, _grabTarget: { value: [] }, _dirty: { value: true, writable: true } }); } _spherePos(out, x, y) { v.divN3(null, v.setC3(out, x - this._center[0], y - this._center[1], 0), this._radius); const mag = v.magSq3(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } orbitStart(x, y) { this._spherePos(this._down, x, y); v.set3(this._up, this.camera.up); v.sub3(this._viewDir, this.camera.eye, this.camera.target); return this.camera; } orbitUpdate(x, y, speed = 5) { const [dx, dy] = v.sub3(null, this._spherePos(this._delta, x, y), this._down); v.cross3(this._side, this._up, this._viewDir); v.normalize(null, this._side, dx); v.mulN3(this._axis, this._up, -dy); v.add3(null, this._axis, this._side); v.normalize(null, v.cross3(null, this._axis, this._viewDir)); m.rotationAroundAxis33(this._rot, this._axis, v.magSq3(this._delta) * speed); m.mulV33(this.camera.up, this._rot, this._up); v.add3(this.camera.eye, this.camera.target, m.mulV33(this._vd, this._rot, this._viewDir)); this.camera._dirty = true; return this.camera; } zoom(delta, min = this.camera.near, max = this.camera.far) { v.sub3(this._vd, this.camera.target, this.camera.eye); const mag = math.clamp(Math.pow(Math.E, delta) * v.mag(this._vd), min, max); v.sub3(this.camera.eye, this.camera.target, v.normalize(null, this._vd, mag)); this.camera._dirty = true; return this.camera; } } return { Frustum, Perspective, Camera, Rig }; }36:T13aa,class SSAO { static makeNoise = n => { const data = new Float32Array(n * 2); for (let i = 0; i < n; ++i) { const index = i * 2; data[index] = Math.random() * 2.0 - 1.0; data[index + 1] = Math.random() * 2.0 - 1.0; } return data; } constructor(gl) { this.gl = gl; this.textures = { ssao: new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.R16F, type: gl.FLOAT, format: gl.RED, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), blur: new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.R16F, type: gl.FLOAT, format: gl.RED, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), noise: new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.RG16F, format: gl.RG, type: gl.FLOAT, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, flip: true, immutable: true, image: SSAO.makeNoise(gl.drawingBufferWidth * gl.drawingBufferHeight) }) }; this.fbos = { ssao: new FBO(gl, { drawBuffers: [this.textures.ssao] }), blur: new FBO(gl, { drawBuffers: [this.textures.blur] }) }; this.ssaoPass = makeProgram(gl, ` float getOcclusion(vec3 position, vec3 normal, ivec2 fragCoord) { vec3 pos = texelFetch(positionTex, fragCoord, 0).xyz - position; float strength = max(dot(normal, normalize(pos)) - bias, 0.0); float attenuation = attenuate + attenuateDist * length(pos); return strength / attenuation * intensity; } void main() { ivec2 fragCoord = ivec2(gl_FragCoord.xy); vec3 position = texelFetch(positionTex, fragCoord, 0).xyz; vec3 normal = texelFetch(normalTex, fragCoord, 0).xyz; vec2 rand = normalize(texelFetch(noiseTex, fragCoord, 0).xy); float depth = (length(position) - depthRange.x) / (depthRange.y - depthRange.x); float kernelRadius = radius * (1.0 - depth); vec2 kernel[4]; kernel[0] = vec2(0.0, 1.0); kernel[1] = vec2(1.0, 0.0); kernel[2] = vec2(0.0, -1.0); kernel[3] = vec2(-1.0, 0.0); occlusion = 0.0; for (int i = 0; i < 4; ++i) { vec2 k1 = reflect(kernel[i], rand); vec2 k2 = vec2(k1.x - k1.y, k1.x + k1.y) * 0.707107; k1 *= kernelRadius; k2 *= kernelRadius; occlusion += getOcclusion(position, normal, fragCoord + ivec2(k1)); occlusion += getOcclusion(position, normal, fragCoord + ivec2(k2 * 0.75)); occlusion += getOcclusion(position, normal, fragCoord + ivec2(k1 * 0.5)); occlusion += getOcclusion(position, normal, fragCoord + ivec2(k2 * 0.25)); } occlusion = saturate(occlusion / 16.0); }`, { uniforms: { radius: ["float", 16.0], bias: ["float", 0.04], attenuate: ["float", 1], attenuateDist: ["float", 1], depthRange: "vec2", intensity: ["float", 1], positionTex: ["sampler2D", 0], normalTex: ["sampler2D", 1], noiseTex: ["sampler2D", 2] }, outputs: { occlusion: "float" } }); this.blurPass = makeProgram(gl, ` void main() { ivec2 fragCoord = ivec2(gl_FragCoord.xy); for (int x = -2; x <= 2; ++x) { for (int y = -2; y <= 2; ++y) { result += texelFetch(tex, fragCoord + ivec2(x, y), 0).r; } } result = result / 25.0; }`, { uniforms: { tex: ["sampler2D", 0] }, outputs: { result: "float" } }, { textures: [this.textures.ssao] }); this.blendPass = makeProgram(gl, ` void main() { ivec2 fragCoord = ivec2(gl_FragCoord.xy); vec3 color = texelFetch(colorTex, fragCoord, 0).rgb; float occlusion = texelFetch(occlusionTex, fragCoord, 0).r; fragColor = vec4(saturate(color - occlusion), 1.0); }`, { uniforms: { colorTex: ["sampler2D", 0], occlusionTex: ["sampler2D", 1], } }); } draw(texPos, texNormal, opts = {}) { const { depthRange, intensity = 1, bias = 0.04, radius = 16, attenuate = 1, attenuateDist = 1, } = opts; this.fbos.ssao.bind(); glClear(this.gl, { viewport: [0, 0, ...this.textures.ssao.size] }); this.ssaoPass.uniforms.bias = bias; this.ssaoPass.uniforms.intensity = intensity; this.ssaoPass.uniforms.radius = radius; this.ssaoPass.uniforms.attenuate = attenuate; this.ssaoPass.uniforms.attenuateDist = attenuateDist; this.ssaoPass.uniforms.depthRange = depthRange; this.ssaoPass.textures = [texPos, texNormal, this.textures.noise]; this.ssaoPass.draw(); this.fbos.ssao.unbind(); this.fbos.blur.bind(); glClear(this.gl, { viewport: [0, 0, ...this.textures.blur.size] }); this.blurPass.draw(); this.fbos.blur.unbind(); } blend(texColor) { this.blendPass.textures = [texColor, this.textures.blur]; this.blendPass.draw(); } }37:T9ca,class GeometryPass { constructor(gl) { this.gl = gl; this.textures = { position: new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.RGBA16F, type: gl.FLOAT, format: gl.RGBA, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), normal: new Texture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, internalFormat: gl.RGBA16F, type: gl.FLOAT, format: gl.RGBA, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }) }; this.fbo = new FBO(gl, { drawBuffers: [this.textures.position, this.textures.normal], renderBuffers: [{ target: new RBO(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, }) }] }); this.model = new Model(gl, { shader: new Shader(gl, { attribs: { position: "vec3", normal: "vec3" }, varying: { position: "vec4", normal: "vec3", }, uniforms: { modelMat: "mat4", projMat: "mat4", viewMat: "mat4", normalMat: "mat4", }, outputs: { position: ["vec4", 0], normal: ["vec4", 1] }, declPrefixes: { v: "v_", o: "o_" }, vs: ` void main() { v_normal = normalize((normalMat * vec4(normal, 0.0)).xyz); v_position = viewMat * modelMat * vec4(position, 1.0); gl_Position = projMat * v_position; }`, fs: ` void main() { o_position = v_position; o_normal = vec4(normalize(v_normal), 0.0); }`, state: { depth: true, cull: true, blend: false, blendFn: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA] } }) }); } setup(spec) { const gl = this.gl; const { attribs, num, indices, mode = gl.TRIANGLES } = spec; this.model.shader.releaseVAO(); this.model.shader.setup(attribs); this.model.attribs = attribs; this.model.indices = indices; this.model.num = num; this.model.mode = mode; return this; } draw(camera) { const { gl, fbo, model } = this; model.uniforms.viewMat = camera.view; model.uniforms.projMat = camera.proj; model.uniforms.normalMat = getNormalMat([], camera.view); fbo.bind(); glClear(gl); model.draw(camera); fbo.unbind(); } }38:T11f7,class QuickPBR { constructor(gl, spec, ibl, sheenE) { const structs = { NormalInfo: { ng: "vec3", t: "vec3", b: "vec3", n: "vec3", ntex: "vec3", }, MaterialInfo: { ior: "float", perceptualRoughness: "float", alphaRoughness: "float", c_diff: "vec3", f0: "vec3", f90: "vec3", metallic: "float", baseColor: "vec3", sheenRoughnessFactor: "float", sheenColorFactor: "vec3", clearcoatF0: "vec3", clearcoatF90: "vec3", clearcoatFactor: "float", clearcoatNormal: "vec3", clearcoatRoughness: "float", specularWeight: "float", thickness: "float", attenuationColor: "vec3", attenuationDistance: "float", } }; const textures = [ ibl.lambertian, ibl.ggx, ibl.sheen, ibl.lutGGX, ibl.lutCharlie, sheenE ]; this.model = new Model(gl, { shader: new Shader(gl, { attribs: { position: "vec3", normal: "vec3", }, varying: { position: "vec3", normal: "vec3" }, declPrefixes: { v: "v_" }, structs, vs: ` void main() { vec4 pos = modelMat * vec4(position, 1.0); v_position = pos.xyz / pos.w; v_normal = normalize((normalMat * vec4(normal, 0.0)).xyz); gl_Position = projMat * viewMat * pos; }`, fs: ` ${fragFunctions} ${fragMaterial} ${fragBRDF} ${fragTonemapping} ${fragIBL} void main() { vec4 baseColor = getBaseColor(); vec3 v = normalize(camera - v_position); NormalInfo normalInfo = getNormalInfo(v); vec3 n = normalInfo.n; float NdotV = clampedDot(n, v); MaterialInfo materialInfo; materialInfo.baseColor = baseColor.rgb; materialInfo.ior = 1.5; materialInfo.f0 = vec3(0.04); materialInfo.f90 = vec3(1.0); materialInfo.specularWeight = 1.0; materialInfo = getMetallicRoughnessInfo(materialInfo); materialInfo = getSheenInfo(materialInfo); materialInfo.perceptualRoughness = saturate(materialInfo.perceptualRoughness); materialInfo.metallic = saturate(materialInfo.metallic); materialInfo.alphaRoughness = materialInfo.perceptualRoughness * materialInfo.perceptualRoughness; float albedoSheenScaling = 1.0; vec3 f_specular = getIBLRadianceGGX(n, v, materialInfo.perceptualRoughness, materialInfo.f0, materialInfo.specularWeight); vec3 f_diffuse = getIBLRadianceLambertian(n, v, materialInfo.perceptualRoughness, materialInfo.c_diff, materialInfo.f0, materialInfo.specularWeight); vec3 f_sheen = getIBLRadianceCharlie(n, v, materialInfo.sheenRoughnessFactor, materialInfo.sheenColorFactor); vec3 f_emissive = emissiveFactor; vec3 color = vec3(0); color = f_emissive + f_diffuse + f_specular; color = f_sheen + color * albedoSheenScaling; fragColor = vec4(toneMap(color), baseColor.a); }`, uniforms: { modelMat: "mat4", projMat: "mat4", viewMat: "mat4", normalMat: "mat4", camera: "vec3", exposure: ["float", 1], emissiveFactor: ["vec3", [0,0,0]], baseColorFactor: ["vec4", [1,1,1,1]], roughnessFactor: ["float", 1], metallicFactor: ["float", 1], lambertianEnvSampler: ["samplerCube", 0], ggxEnvSampler: ["samplerCube", 1], charlieEnvSampler: ["samplerCube", 2], mipCount: ["int", ibl.mipmapLevels], ggxLUT: ["sampler2D", 3], charlieLUT: ["sampler2D", 4], sheenRoughnessFactor: ["float", 0.0], sheenColorFactor: ["vec3", [1,1,1]], sheenELUT: ["sampler2D", 5], }, state: { depth: true, cull: true } }), textures, }); this.model.attribs = spec.attribs; this.model.indices = spec.indices; this.model.num = spec.num; this.model.mode = spec.mode; this.model.shader.setup(spec.attribs); } draw(camera, opts = {}) { const { roughness = 1, metallic = 1, exposure = 1, sheenRoughness = 0 } = opts; this.model.uniforms.viewMat = camera.view; this.model.uniforms.projMat = camera.proj; this.model.uniforms.camera = camera.eye; this.model.uniforms.normalMat = getNormalMat([], camera.view); this.model.uniforms.roughnessFactor = roughness; this.model.uniforms.metallicFactor = metallic; this.model.uniforms.exposure = exposure; this.model.uniforms.sheenRoughnessFactor = sheenRoughness; this.model.draw(); } }39:T11c2,viewof fragBRDF = code("glsl", "brdf.frag")` // // Fresnel // // http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html // https://github.com/wdas/brdf/tree/master/src/brdfs // https://google.github.io/filament/Filament.md.html // // The following equation models the Fresnel reflectance term of the spec equation (aka F()) // Implementation of fresnel from [4], Equation 15 vec3 F_Schlick(vec3 f0, vec3 f90, float VdotH) { return f0 + (f90 - f0) * pow(clamp(1.0 - VdotH, 0.0, 1.0), 5.0); } // Smith Joint GGX // Note: Vis = G / (4 * NdotL * NdotV) // see Eric Heitz. 2014. Understanding the Masking-Shadowing Function in Microfacet-Based BRDFs. Journal of Computer Graphics Techniques, 3 // see Real-Time Rendering. Page 331 to 336. // see https://google.github.io/filament/Filament.md.html#materialsystem/specularbrdf/geometricshadowing(specularg) float V_GGX(float NdotL, float NdotV, float alphaRoughness) { float alphaRoughnessSq = alphaRoughness * alphaRoughness; float GGXV = NdotL * sqrt(NdotV * NdotV * (1.0 - alphaRoughnessSq) + alphaRoughnessSq); float GGXL = NdotV * sqrt(NdotL * NdotL * (1.0 - alphaRoughnessSq) + alphaRoughnessSq); float GGX = GGXV + GGXL; if (GGX > 0.0) return 0.5 / GGX; return 0.0; } // The following equation(s) model the distribution of microfacet normals across the area being drawn (aka D()) // Implementation from "Average Irregularity Representation of a Roughened Surface for Ray Reflection" by T. S. Trowbridge, and K. P. Reitz // Follows the distribution function recommended in the SIGGRAPH 2013 course notes from EPIC Games [1], Equation 3. float D_GGX(float NdotH, float alphaRoughness) { float alphaRoughnessSq = alphaRoughness * alphaRoughness; float f = (NdotH * NdotH) * (alphaRoughnessSq - 1.0) + 1.0; return alphaRoughnessSq / (PI * f * f); } float lambdaSheenNumericHelper(float x, float alphaG) { float oneMinusAlphaSq = (1.0 - alphaG) * (1.0 - alphaG); float a = mix(21.5473, 25.3245, oneMinusAlphaSq); float b = mix(3.82987, 3.32435, oneMinusAlphaSq); float c = mix(0.19823, 0.16801, oneMinusAlphaSq); float d = mix(-1.97760, -1.27393, oneMinusAlphaSq); float e = mix(-4.32054, -4.85967, oneMinusAlphaSq); return a / (1.0 + b * pow(x, c)) + d * x + e; } float lambdaSheen(float cosTheta, float alphaG) { if (abs(cosTheta) < 0.5) return exp(lambdaSheenNumericHelper(cosTheta, alphaG)); else return exp(2.0 * lambdaSheenNumericHelper(0.5, alphaG) - lambdaSheenNumericHelper(1.0 - cosTheta, alphaG)); } float V_Sheen(float NdotL, float NdotV, float sheenRoughness) { sheenRoughness = max(sheenRoughness, 0.000001); //clamp (0,1] float alphaG = sheenRoughness * sheenRoughness; return clamp(1.0 / ((1.0 + lambdaSheen(NdotV, alphaG) + lambdaSheen(NdotL, alphaG)) * (4.0 * NdotV * NdotL)), 0.0, 1.0); } //Sheen implementation------------------------------------------------------------------------------------- // See https://github.com/sebavan/glTF/tree/KHR_materials_sheen/extensions/2.0/Khronos/KHR_materials_sheen // Estevez and Kulla http://www.aconty.com/pdf/s2017_pbs_imageworks_sheen.pdf float D_Charlie(float sheenRoughness, float NdotH) { sheenRoughness = max(sheenRoughness, 0.000001); //clamp (0,1] float alphaG = sheenRoughness * sheenRoughness; float invR = 1.0 / alphaG; float cos2h = NdotH * NdotH; float sin2h = 1.0 - cos2h; return (2.0 + invR) * pow(sin2h, invR * 0.5) / (2.0 * PI); } //https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#acknowledgments AppendixB vec3 BRDF_lambertian(vec3 f0, vec3 f90, vec3 diffuseColor, float specularWeight, float VdotH) { // see https://seblagarde.wordpress.com/2012/01/08/pi-or-not-to-pi-in-game-lighting-equation/ return (1.0 - specularWeight * F_Schlick(f0, f90, VdotH)) * (diffuseColor / PI); } // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#acknowledgments AppendixB vec3 BRDF_specularGGX(vec3 f0, vec3 f90, float alphaRoughness, float specularWeight, float VdotH, float NdotL, float NdotV, float NdotH) { vec3 F = F_Schlick(f0, f90, VdotH); float Vis = V_GGX(NdotL, NdotV, alphaRoughness); float D = D_GGX(NdotH, alphaRoughness); return specularWeight * F * Vis * D; } // f_sheen vec3 BRDF_specularSheen(vec3 sheenColor, float sheenRoughness, float NdotL, float NdotV, float NdotH) { float sheenDistribution = D_Charlie(sheenRoughness, NdotH); float sheenVisibility = V_Sheen(NdotL, NdotV, sheenRoughness); return sheenColor * sheenDistribution * sheenVisibility; } `3a:Tb00,viewof fragIBL = code("glsl", "ibl.frag")` vec3 getDiffuseLight(vec3 n) { return texture(lambertianEnvSampler, n).rgb; } vec4 getSpecularSample(vec3 reflection, float lod) { return textureLod(ggxEnvSampler, reflection, lod); } vec4 getSheenSample(vec3 reflection, float lod) { return textureLod(charlieEnvSampler, reflection, lod); } vec3 getIBLRadianceGGX(vec3 n, vec3 v, float roughness, vec3 F0, float specularWeight) { float NdotV = clampedDot(n, v); float lod = roughness * float(mipCount - 1); vec3 reflection = normalize(reflect(-v, n)); vec2 brdfSamplePoint = clamp(vec2(NdotV, roughness), vec2(0.0, 0.0), vec2(1.0, 1.0)); vec2 f_ab = texture(ggxLUT, brdfSamplePoint).rg; vec4 specularSample = getSpecularSample(reflection, lod); vec3 specularLight = specularSample.rgb; // see https://bruop.github.io/ibl/#single_scattering_results at Single Scattering Results // Roughness dependent fresnel, from Fdez-Aguera vec3 Fr = max(vec3(1.0 - roughness), F0) - F0; vec3 k_S = F0 + Fr * pow(1.0 - NdotV, 5.0); vec3 FssEss = k_S * f_ab.x + f_ab.y; return specularWeight * specularLight * FssEss; } // specularWeight is introduced with KHR_materials_specular vec3 getIBLRadianceLambertian(vec3 n, vec3 v, float roughness, vec3 diffuseColor, vec3 F0, float specularWeight) { float NdotV = clampedDot(n, v); vec2 brdfSamplePoint = clamp(vec2(NdotV, roughness), vec2(0.0, 0.0), vec2(1.0, 1.0)); vec2 f_ab = texture(ggxLUT, brdfSamplePoint).rg; vec3 irradiance = getDiffuseLight(n); // see https://bruop.github.io/ibl/#single_scattering_results at Single Scattering Results // Roughness dependent fresnel, from Fdez-Aguera vec3 Fr = max(vec3(1.0 - roughness), F0) - F0; vec3 k_S = F0 + Fr * pow(1.0 - NdotV, 5.0); vec3 FssEss = specularWeight * k_S * f_ab.x + f_ab.y; // <--- GGX / specular light contribution (scale it down if the specularWeight is low) // Multiple scattering, from Fdez-Aguera float Ems = (1.0 - (f_ab.x + f_ab.y)); vec3 F_avg = specularWeight * (F0 + (1.0 - F0) / 21.0); vec3 FmsEms = Ems * FssEss * F_avg / (1.0 - F_avg * Ems); vec3 k_D = diffuseColor * (1.0 - FssEss + FmsEms); // we use +FmsEms as indicated by the formula in the blog post (might be a typo in the implementation) return (FmsEms + k_D) * irradiance; } vec3 getIBLRadianceCharlie(vec3 n, vec3 v, float sheenRoughness, vec3 sheenColor) { float NdotV = clampedDot(n, v); float lod = sheenRoughness * float(mipCount - 1); vec3 reflection = normalize(reflect(-v, n)); vec2 brdfSamplePoint = clamp(vec2(NdotV, sheenRoughness), vec2(0.0, 0.0), vec2(1.0, 1.0)); float brdf = texture(charlieLUT, brdfSamplePoint).b; vec4 sheenSample = getSheenSample(reflection, lod); vec3 sheenLight = sheenSample.rgb; return sheenLight * sheenColor * brdf; } `3b:T4724,class IBLSampler { constructor(gl) { this.gl = gl; this.model = new Model(gl, { num: 3, mode: gl.TRIANGLES, shader: new Shader(gl, { vs: ` void main(void) { float x = float((gl_VertexID & 1) << 2); float y = float((gl_VertexID & 2) << 1); v_texcoord.x = x * 0.5; v_texcoord.y = y * 0.5; gl_Position = vec4(x - 1.0, y - 1.0, 0, 1); }`, fs: ` const int cLambertian = 0; const int cGGX = 1; const int cCharlie = 2; vec3 uvToXYZ(int face, vec2 uv) { if(face == 0) return vec3(1.f, uv.y, -uv.x); else if(face == 1) return vec3(-1.f, uv.y, uv.x); else if(face == 2) return vec3(+uv.x, -1.f, +uv.y); else if(face == 3) return vec3(+uv.x, 1.f, -uv.y); else if(face == 4) return vec3(+uv.x, uv.y, 1.f); else return vec3(-uv.x, +uv.y, -1.f); } vec2 dirToUV(vec3 dir) { return vec2(0.5f + 0.5f * atan(dir.z, dir.x) / PI, 1.f - acos(dir.y) / PI); } // Hammersley Points on the Hemisphere // CC BY 3.0 (Holger Dammertz) // http://holger.dammertz.org/stuff/notes_HammersleyOnHemisphere.html // with adapted interface float radicalInverse_VdC(uint bits) { bits = (bits << 16u) | (bits >> 16u); bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u); bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u); bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u); bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u); return float(bits) * 2.3283064365386963e-10; // / 0x100000000 } // hammersley2d describes a sequence of points in the 2d unit square [0,1)^2 // that can be used for quasi Monte Carlo integration vec2 hammersley2d(int i, int N) { return vec2(float(i) / float(N), radicalInverse_VdC(uint(i))); } // Hemisphere Sample // TBN generates a tangent bitangent normal coordinate frame from the normal // (the normal must be normalized) mat3 generateTBN(vec3 normal) { vec3 bitangent = vec3(0.0, 1.0, 0.0); float NdotUp = dot(normal, vec3(0.0, 1.0, 0.0)); float epsilon = 0.0000001; if(1.0 - abs(NdotUp) <= epsilon) { // Sampling +Y or -Y, so we need a more robust bitangent. if(NdotUp > 0.0) { bitangent = vec3(0.0, 0.0, 1.0); } else { bitangent = vec3(0.0, 0.0, -1.0); } } vec3 tangent = normalize(cross(bitangent, normal)); bitangent = cross(normal, tangent); return mat3(tangent, bitangent, normal); } struct MicrofacetDistributionSample { float pdf; float cosTheta; float sinTheta; float phi; }; float D_GGX(float NdotH, float roughness) { float a = NdotH * roughness; float k = roughness / (1.0 - NdotH * NdotH + a * a); return k * k * (1.0 / PI); } // GGX microfacet distribution // https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.html // This implementation is based on https://bruop.github.io/ibl/, // https://www.tobias-franke.eu/log/2014/03/30/notes_on_importance_sampling.html // and https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch20.html MicrofacetDistributionSample GGX(vec2 xi, float roughness) { MicrofacetDistributionSample ggx; // evaluate sampling equations float alpha = roughness * roughness; ggx.cosTheta = saturate(sqrt((1.0 - xi.y) / (1.0 + (alpha * alpha - 1.0) * xi.y))); ggx.sinTheta = sqrt(1.0 - ggx.cosTheta * ggx.cosTheta); ggx.phi = 2.0 * PI * xi.x; // evaluate GGX pdf (for half vector) ggx.pdf = D_GGX(ggx.cosTheta, alpha); // Apply the Jacobian to obtain a pdf that is parameterized by l // see https://bruop.github.io/ibl/ // Typically you'd have the following: // float pdf = D_GGX(NoH, roughness) * NoH / (4.0 * VoH); // but since V = N => VoH == NoH ggx.pdf /= 4.0; return ggx; } // NDF float D_Ashikhmin(float NdotH, float roughness) { float alpha = roughness * roughness; // Ashikhmin 2007, "Distribution-based BRDFs" float a2 = alpha * alpha; float cos2h = NdotH * NdotH; float sin2h = 1.0 - cos2h; float sin4h = sin2h * sin2h; float cot2 = -cos2h / (a2 * sin2h); return 1.0 / (PI * (4.0 * a2 + 1.0) * sin4h) * (4.0 * exp(cot2) + sin4h); } // NDF float D_Charlie(float sheenRoughness, float NdotH) { sheenRoughness = max(sheenRoughness, 0.000001); //clamp (0,1] float invR = 1.0 / sheenRoughness; float cos2h = NdotH * NdotH; float sin2h = 1.0 - cos2h; return (2.0 + invR) * pow(sin2h, invR * 0.5) / (2.0 * PI); } MicrofacetDistributionSample Charlie(vec2 xi, float roughness) { MicrofacetDistributionSample charlie; float alpha = roughness * roughness; charlie.sinTheta = pow(xi.y, alpha / (2.0 * alpha + 1.0)); charlie.cosTheta = sqrt(1.0 - charlie.sinTheta * charlie.sinTheta); charlie.phi = 2.0 * PI * xi.x; // evaluate Charlie pdf (for half vector) charlie.pdf = D_Charlie(alpha, charlie.cosTheta); // Apply the Jacobian to obtain a pdf that is parameterized by l charlie.pdf /= 4.0; return charlie; } MicrofacetDistributionSample Lambertian(vec2 xi, float roughness) { MicrofacetDistributionSample lambertian; // Cosine weighted hemisphere sampling // http://www.pbr-book.org/3ed-2018/Monte_Carlo_Integration/2D_Sampling_with_Multidimensional_Transformations.html#Cosine-WeightedHemisphereSampling lambertian.cosTheta = sqrt(1.0 - xi.y); lambertian.sinTheta = sqrt(xi.y); lambertian.phi = 2.0 * PI * xi.x; lambertian.pdf = lambertian.cosTheta / PI; // evaluation for solid angle, therefore drop the sinTheta return lambertian; } // getImportanceSample returns an importance sample direction with pdf in the .w component vec4 getImportanceSample(int sampleIndex, vec3 N, float roughness) { // generate a quasi monte carlo point in the unit square [0.1)^2 vec2 xi = hammersley2d(sampleIndex, sampleCount); MicrofacetDistributionSample importanceSample; // generate the points on the hemisphere with a fitting mapping for // the distribution (e.g. lambertian uses a cosine importance) if(distribution == cLambertian) { importanceSample = Lambertian(xi, roughness); } else if(distribution == cGGX) { // Trowbridge-Reitz / GGX microfacet model (Walter et al) // https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.html importanceSample = GGX(xi, roughness); } else if(distribution == cCharlie) { importanceSample = Charlie(xi, roughness); } // transform the hemisphere sample to the normal coordinate frame // i.e. rotate the hemisphere to the normal direction vec3 localSpaceDirection = normalize(vec3(importanceSample.sinTheta * cos(importanceSample.phi), importanceSample.sinTheta * sin(importanceSample.phi), importanceSample.cosTheta)); mat3 TBN = generateTBN(N); vec3 direction = TBN * localSpaceDirection; return vec4(direction, importanceSample.pdf); } // Mipmap Filtered Samples (GPU Gems 3, 20.4) // https://developer.nvidia.com/gpugems/gpugems3/part-iii-rendering/chapter-20-gpu-based-importance-sampling // https://cgg.mff.cuni.cz/~jaroslav/papers/2007-sketch-fis/Final_sap_0073.pdf float computeLod(float pdf) { // // Solid angle of current sample -- bigger for less likely samples // float omegaS = 1.0 / (float(sampleCount) * pdf); // // Solid angle of texel // // note: the factor of 4.0 * PI // float omegaP = 4.0 * PI / (6.0 * float(width) * float(width)); // // Mip level is determined by the ratio of our sample's solid angle to a texel's solid angle // // note that 0.5 * log2 is equivalent to log4 // float lod = 0.5 * log2(omegaS / omegaP); // babylon introduces a factor of K (=4) to the solid angle ratio // this helps to avoid undersampling the environment map // this does not appear in the original formulation by Jaroslav Krivanek and Mark Colbert // log4(4) == 1 // lod += 1.0; // We achieved good results by using the original formulation from Krivanek & Colbert adapted to cubemaps // https://cgg.mff.cuni.cz/~jaroslav/papers/2007-sketch-fis/Final_sap_0073.pdf float lod = 0.5 * log2(6.0 * float(width) * float(width) / (float(sampleCount) * pdf)); return lod; } vec3 filterColor(vec3 N) { //return textureLod(uCubeMap, N, 3.0).rgb; vec3 color = vec3(0.f); float weight = 0.0f; for(int i = 0; i < sampleCount; ++i) { vec4 importanceSample = getImportanceSample(i, N, roughness); vec3 H = vec3(importanceSample.xyz); float pdf = importanceSample.w; // mipmap filtered samples (GPU Gems 3, 20.4) float lod = computeLod(pdf); // apply the bias to the lod lod += lodBias; if(distribution == cLambertian) { // sample lambertian at a lower resolution to avoid fireflies vec3 lambertian = textureLod(uCubeMap, H, lod).rgb; //// the below operations cancel each other out // lambertian *= NdotH; // lamberts law // lambertian /= pdf; // invert bias from importance sampling // lambertian /= PI; // convert irradiance to radiance https://seblagarde.wordpress.com/2012/01/08/pi-or-not-to-pi-in-game-lighting-equation/ color += lambertian; } else if(distribution == cGGX || distribution == cCharlie) { // Note: reflect takes incident vector. vec3 V = N; vec3 L = normalize(reflect(-V, H)); float NdotL = dot(N, L); if(NdotL > 0.0) { if(roughness == 0.0) { // without this the roughness=0 lod is too high lod = lodBias; } vec3 sampleColor = textureLod(uCubeMap, L, lod).rgb; color += sampleColor * NdotL; weight += NdotL; } } } if(weight != 0.0f) { color /= weight; } else { color /= float(sampleCount); } return color.rgb; } // From the filament docs. Geometric Shadowing function // https://google.github.io/filament/Filament.html#toc4.4.2 float V_SmithGGXCorrelated(float NoV, float NoL, float roughness) { float a2 = pow(roughness, 4.0); float GGXV = NoL * sqrt(NoV * NoV * (1.0 - a2) + a2); float GGXL = NoV * sqrt(NoL * NoL * (1.0 - a2) + a2); return 0.5 / (GGXV + GGXL); } // https://github.com/google/filament/blob/master/shaders/src/brdf.fs#L136 float V_Ashikhmin(float NdotL, float NdotV) { return clamp(1.0 / (4.0 * (NdotL + NdotV - NdotL * NdotV)), 0.0, 1.0); } // Compute LUT for GGX distribution. // See https://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf vec3 LUT(float NdotV, float roughness) { // Compute spherical view vector: (sin(phi), 0, cos(phi)) vec3 V = vec3(sqrt(1.0 - NdotV * NdotV), 0.0, NdotV); // The macro surface normal just points up. vec3 N = vec3(0.0, 0.0, 1.0); // To make the LUT independant from the material's F0, which is part of the Fresnel term // when substituted by Schlick's approximation, we factor it out of the integral, // yielding to the form: F0 * I1 + I2 // I1 and I2 are slighlty different in the Fresnel term, but both only depend on // NoL and roughness, so they are both numerically integrated and written into two channels. float A = 0.0; float B = 0.0; float C = 0.0; for(int i = 0; i < sampleCount; ++i) { // Importance sampling, depending on the distribution. vec4 importanceSample = getImportanceSample(i, N, roughness); vec3 H = importanceSample.xyz; // float pdf = importanceSample.w; vec3 L = normalize(reflect(-V, H)); float NdotL = saturate(L.z); float NdotH = saturate(H.z); float VdotH = saturate(dot(V, H)); if(NdotL > 0.0) { if(distribution == cGGX) { // LUT for GGX distribution. // Taken from: https://bruop.github.io/ibl // Shadertoy: https://www.shadertoy.com/view/3lXXDB // Terms besides V are from the GGX PDF we're dividing by. float V_pdf = V_SmithGGXCorrelated(NdotV, NdotL, roughness) * VdotH * NdotL / NdotH; float Fc = pow(1.0 - VdotH, 5.0); A += (1.0 - Fc) * V_pdf; B += Fc * V_pdf; C += 0.0; } if(distribution == cCharlie) { // LUT for Charlie distribution. float sheenDistribution = D_Charlie(roughness, NdotH); float sheenVisibility = V_Ashikhmin(NdotL, NdotV); A += 0.0; B += 0.0; C += sheenVisibility * sheenDistribution * NdotL * VdotH; } } } // The PDF is simply pdf(v, h) -> NDF * . // To parametrize the PDF over l, use the Jacobian transform, yielding to: pdf(v, l) -> NDF * / 4 // Since the BRDF divide through the PDF to be normalized, the 4 can be pulled out of the integral. return vec3(4.0 * A, 4.0 * B, 4.0 * 2.0 * PI * C) / float(sampleCount); } // entry point void main() { vec3 color = vec3(0); if(isGeneratingLUT == 0) { vec2 newUV = v_texcoord; newUV = newUV * 2.0 - 1.0; vec3 scan = uvToXYZ(currentFace, newUV); vec3 direction = normalize(scan); direction.y = -direction.y; color = filterColor(direction); } else { color = LUT(v_texcoord.x, v_texcoord.y); } fragColor = vec4(color, 1.0); }`, declPrefixes: { v: "v_" }, varying: { texcoord: "vec2" }, uniforms: { uCubeMap: ["samplerCube", 0], currentFace: "int", distribution: "int", sampleCount: "int", roughness: ["float", 0.0], width: "int", lodBias: "float", isGeneratingLUT: "int" } }), }); } sample(cubemap, opts = {}) { opts = { size: 256, lowestMipLevel: 4, ...opts }; opts.mipmapLevels = Math.floor(Math.log2(opts.size)) + 1 - opts.lowestMipLevel; this.model.textures = [cubemap]; const fbo = new FBO(this.gl); const lambertian = this.sampleLambertian(fbo, opts); const ggx = this.sampleGGX(fbo, opts); const sheen = this.sampleSheen(fbo, opts); const lutGGX = this.sampleGGXLut(fbo, opts); const lutCharlie = this.sampleCharlieLut(fbo, opts); fbo.unbind(); fbo.release(); return { lambertian, ggx, sheen, lutGGX, lutCharlie, ...opts }; } makeCubemapTexture(opts) { const gl = this.gl; return Texture.makeCubemap(gl, null, { internalFormat: gl.RGBA32F, format: gl.RGBA, type: gl.FLOAT, filter: [gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR], wrap: gl.CLAMP_TO_EDGE, mipmap: true, anisotropy: false, ...opts }); } makeLutTexture(opts) { const gl = this.gl; return new Texture(this.gl, { width: 1024, height: 1024, internalFormat: gl.RGBA32F, format: gl.RGBA, type: gl.FLOAT, filter: gl.LINEAR, wrap: gl.CLAMP_TO_EDGE, mipmap: false, anisotropy: false, image: null, ...opts }); } filter(fbo, target, opts) { const gl = this.gl; this.model.uniforms.roughness = opts.roughness; this.model.uniforms.width = opts.size; this.model.uniforms.distribution = opts.distribution; this.model.uniforms.sampleCount = opts.sampleCount; this.model.uniforms.lodBias = opts.lodBias || 0; this.model.uniforms.isGeneratingLUT = 0; const level = opts.level || 0; const size = opts.size >> level; for(let i = 0; i < 6; ++i) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, target.tex, level); glClear(gl, { color: [1,0,0,0], viewport: [0, 0, size, size] }); this.model.uniforms.currentFace = i; this.model.draw(); } } sampleLut(fbo, target, distribution) { const gl = this.gl; gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target.tex, 0); glClear(gl, { color: [1,0,0,0], viewport: [0, 0, ...target.size] }); this.model.uniforms.roughness = 0.0; this.model.uniforms.width = 0.0; this.model.uniforms.distribution = distribution; this.model.uniforms.sampleCount = 512; this.model.uniforms.lodBias = 0.0; this.model.uniforms.isGeneratingLUT = 1; this.model.uniforms.currentFace = 0; this.model.draw(); } sampleLambertian(fbo, opts) { const gl = this.gl; const target = this.makeCubemapTexture({ width: opts.size, height: opts.size, filter: gl.LINEAR, mipmap: false, }); this.filter(fbo, target, { distribution: 0, roughness: 0, sampleCount: 2048, size: opts.size, }); return target; } sampleGGX(fbo, opts) { const target = this.makeCubemapTexture({ width: opts.size, height: opts.size, }); for (let level = 0; level <= opts.mipmapLevels; level++) { const size = opts.size >> level; const roughness = level / (opts.mipmapLevels - 1); this.filter(fbo, target, { distribution: 1, roughness: roughness, sampleCount: 1024, size: opts.size, level, }); } return target; } sampleSheen(fbo, opts) { const target = this.makeCubemapTexture({ width: opts.size, height: opts.size, }); for (let level = 0; level <= opts.mipmapLevels; level++) { const size = opts.size >> level; const roughness = level / (opts.mipmapLevels - 1); this.filter(fbo, target, { distribution: 2, roughness: roughness, sampleCount: 64, size: opts.size, level, }); } return target; } sampleGGXLut(fbo, opts) { const target = this.makeLutTexture(); this.sampleLut(fbo, target, 1); return target; } sampleCharlieLut(fbo, opts) { const target = this.makeLutTexture(); this.sampleLut(fbo, target, 2); return target; } }3c:T782,class EquirectangularToCubemap { constructor(gl, texture) { this.gl = gl; this.model = new Model(gl, { num: 3, mode: gl.TRIANGLES, shader: new Shader(gl, { vs: ` void main(void) { float x = float((gl_VertexID & 1) << 2); float y = float((gl_VertexID & 2) << 1); v_texcoord.x = x * 0.5; v_texcoord.y = y * 0.5; gl_Position = vec4(x - 1.0, y - 1.0, 0, 1); }`, fs: ` vec3 uvToXYZ(int face, vec2 uv) { if(face == 0) return vec3(1.f, uv.y, -uv.x); else if(face == 1) return vec3(-1.f, uv.y, uv.x); else if(face == 2) return vec3(+uv.x, -1.f, +uv.y); else if(face == 3) return vec3(+uv.x, 1.f, -uv.y); else if(face == 4) return vec3(+uv.x, uv.y, 1.f); else return vec3(-uv.x, +uv.y, -1.f); } vec2 dirToUV(vec3 dir) { return vec2( 0.5f + 0.5f * atan(dir.z, dir.x) / PI, 1.f - acos(dir.y) / PI); } vec3 equirectangularToCubemap(int face, vec2 texcoord) { vec2 texcoord1 = texcoord * 2.0 - 1.0; vec3 scan = uvToXYZ(face, texcoord1); vec2 uv = dirToUV(normalize(scan)); return texture(tex, uv).rgb; } void main(void) { vec3 color = equirectangularToCubemap(currentFace, v_texcoord); fragColor = vec4(color, 1.0); }`, declPrefixes: { v: "v_" }, varying: { texcoord: "vec2" }, uniforms: { tex: ["sampler2D", 0], currentFace: "int" } }), textures: [texture] }); this.fbo = new FBO(gl); } draw(cubemap) { const gl = this.gl; this.fbo.bind(); for(let i = 0; i < 6; ++i) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, cubemap.tex, 0); glClear(gl, { color: [1,0,0,0], viewport: [0, 0, ...cubemap.size] }); this.model.uniforms.currentFace = i; this.model.draw(); } this.fbo.unbind(); } }3d:Ta89,loadHDR = { const _rgbeToFloat = buffer => { const length = buffer.byteLength >> 2; const result = new Float32Array(length * 3); for (let i = 0; i < length; i++) { const s = Math.pow(2, buffer[i * 4 + 3] - (128 + 8)); result[i * 3] = buffer[i * 4] * s; result[i * 3 + 1] = buffer[i * 4 + 1] * s; result[i * 3 + 2] = buffer[i * 4 + 2] * s; } return result; }; return buffer => { let header = ''; let pos = 0; const d8 = buffer; let format = undefined; // read header. while (!header.match(/\n\n[^\n]+\n/g)) header += String.fromCharCode(d8[pos++]); // check format. format = header.match(/FORMAT=(.*)$/m); if (format.length < 2) return undefined; format = format[1]; if (format != '32-bit_rle_rgbe') return console.warn('unknown format : ' + format), this.onerror(); // parse resolution let rez = header.split(/\n/).reverse(); if (rez.length < 2) return undefined; rez = rez[1].split(' '); if (rez.length < 4) return undefined; const width = rez[3] * 1, height = rez[1] * 1; // Create image. const img = new Uint8Array(width * height * 4); let ipos = 0; // Read all scanlines for (let j = 0; j < height; j++) { const scanline = []; let rgbe = d8.slice(pos, pos += 4); const isNewRLE = (rgbe[0] == 2 && rgbe[1] == 2 && rgbe[2] == ((width >> 8) & 0xFF) && rgbe[3] == (width & 0xFF)); if (isNewRLE && (width >= 8) && (width < 32768)) { for (let i = 0; i < 4; i++) { let ptr = i * width; const ptr_end = (i + 1) * width; let buf = undefined; let count = undefined; while (ptr < ptr_end) { buf = d8.slice(pos, pos += 2); if (buf[0] > 128) { count = buf[0] - 128; while (count-- > 0) scanline[ptr++] = buf[1]; } else { count = buf[0] - 1; scanline[ptr++] = buf[1]; while (count-- > 0) scanline[ptr++] = d8[pos++]; } } } for (let i = 0; i < width; i++) { img[ipos++] = scanline[i + 0 * width]; img[ipos++] = scanline[i + 1 * width]; img[ipos++] = scanline[i + 2 * width]; img[ipos++] = scanline[i + 3 * width]; } } else { pos -= 4; for (let i = 0; i < width; i++) { rgbe = d8.slice(pos, pos += 4); img[ipos++] = rgbe[0]; img[ipos++] = rgbe[1]; img[ipos++] = rgbe[2]; img[ipos++] = rgbe[3]; } } } return { data: _rgbeToFloat(img), width, height }; }; }3e:T45d,code = (lang, name, open = false) => { const ID = `code-styles`; const style = html`