2e:null 2f:["$","title",null,{"children":"WebGL Photon Map Global Illumination | Chathura Jayalath | Observable"}] 34:Tca6,render_shader_code = ({ vs: ` precision mediump float; // an attribute will receive data from a buffer attribute vec4 a_position; attribute vec2 a_texcoord; // pass value to fragment shader varying vec2 v_texcoord; varying vec4 v_position; // all shaders have a main function void main() { // gl_Position is a special variable a vertex shader // is responsible for setting gl_Position = a_position; v_texcoord = a_texcoord; v_position = a_position; } `, fs: ` #extension GL_EXT_draw_buffers : require ${fs_commonMacros} // fragment shaders don't have a default precision so we need // to pick one. mediump is a good default precision mediump float; // input from vertex shader varying vec2 v_texcoord; varying vec4 v_position; // the textures uniform sampler2D u_texture_photonmap; uniform sampler2D u_texture_colors; uniform vec2 u_resolution; uniform vec3 u_cameraEyeUVW[4]; // camera [Eye, U, V, W] at indexes [0, 1, 2, 3] uniform float fov; ${myGLSLDefinitions} PhotonData getPhoton(int index){ float baseCoordY = ((float(index) + 0.5) / float(WPM_PHOTONMAP_LENGTH)); vec4 photon_pos = texture2D(u_texture_photonmap, vec2(0.5/4.0, baseCoordY)); vec4 photon_dir = texture2D(u_texture_photonmap, vec2(1.5/4.0, baseCoordY)); vec4 photon_normal = texture2D(u_texture_photonmap, vec2(2.5/4.0, baseCoordY)); vec4 photon_state = texture2D(u_texture_photonmap, vec2(3.5/4.0, baseCoordY)); return PhotonData(photon_pos.xyz, photon_dir.xyz, photon_normal.xyz, photon_state.x, photon_state.y, photon_state.z); } void main() { initMaterials(); float pixelID = v_texcoord.x + v_texcoord.y * u_resolution.x; // gl_FragColor is a special variable a fragment shader // is responsible for setting vec2 pixel = gl_FragCoord.xy; //--- BASE RAY CALC ---- float height = 2.0 * tan(fov/2.0); float aspect = u_resolution.x / u_resolution.y; float width = height * aspect; vec2 windowDim = vec2(width,height); vec2 pixelSize = windowDim/u_resolution; vec2 delta = -0.5*windowDim + pixel*pixelSize; vec2 pixelOriginOffset = pixelSize * (-0.5); vec3 rayDir = getRayDirection(vec2(0.0), delta, u_cameraEyeUVW[1], u_cameraEyeUVW[2], u_cameraEyeUVW[3]); RayCollisionOutput current_rco = detectNearestAABBCollision(u_cameraEyeUVW[0], rayDir); if(current_rco.matchID > -1){ vec3 dir = vec3(0.0); float count = 0.0; float minDistSqr = 4.0 * 4.0; for(int i=0; i < (WPM_PHOTONMAP_LENGTH); i++){ PhotonData photon = getPhoton(i); if(int(photon.state) == (WPM_STATE_ABSORBED) || int(photon.state) == (WPM_STATE_REFLECTED)){ float distSqr = dot((photon.pos - current_rco.pos),(photon.pos - current_rco.pos)); if(distSqr < minDistSqr){ dir += photon.dir; count += 1.0; //power = this_power; } } } dir = normalize(dir); gl_FragColor = vec4(current_rco.matCol * dot(current_rco.normal, -dir), 1.0); //gl_FragColor = vec4(current_rco.matCol, 1.0); }else{ gl_FragColor = vec4( rng2d(pixel), rng2d(pixel), rng2d(pixel), 1.0); } } ` })35:T10e5,computing_shader_code = ({ vs: ` precision mediump float; // an attribute will receive data from a buffer attribute vec4 a_position; attribute vec2 a_texcoord; // pass value to fragment shader varying vec2 v_texcoord; varying vec4 v_position; // all shaders have a main function void main() { // gl_Position is a special variable a vertex shader // is responsible for setting gl_Position = a_position; v_texcoord = a_texcoord; v_position = a_position; } `, fs: ` #extension GL_EXT_draw_buffers : require ${fs_commonMacros} // fragment shaders don't have a default precision so we need // to pick one. mediump is a good default precision mediump float; // input from vertex shader varying vec2 v_texcoord; varying vec4 v_position; uniform sampler2D u_texture_colors; uniform vec2 u_dimensions; uniform vec3 u_lightPosMin; uniform vec3 u_lightPosMax; uniform sampler2D u_texture_data_pos; uniform sampler2D u_texture_data_dir; uniform sampler2D u_texture_data_power; uniform sampler2D u_texture_data_state; ${myGLSLDefinitions} void main() { initMaterials(); // gl_FragData.xy contains the width and height of the framebuffer texture // therefore variable "pixel" will contain natural index and // variable "v_texcoord" will contain normalized index vec2 pixel = gl_FragCoord.xy; // natural index float pixelID = pixel.x + (pixel.y * u_dimensions.x); vec4 prev_state = texture2D(u_texture_data_state, v_texcoord); vec3 photon_origin; vec3 photon_dir; bool isAlive = true; int previous_state = int(prev_state.x); if( previous_state == (WPM_STATE_INIT) ){ // ----------------Emission of Photon------------------ isAlive = true; AffineSquare aslight = GenerateAffineSquare(u_lightPosMin.xz, u_lightPosMax.xz); photon_origin = getLightPosSample_Square(aslight, rng2d(pixel), rng2d(pixel), u_lightPosMin.y ); photon_dir = getRandomHemisphereSample(vec3(0.0, -1.0, 0.0), photon_origin, rng2d(pixel), 2.0 * PI * rng2d(pixel)); }else if( previous_state == (WPM_STATE_REFLECTED) ){ // --------------------A Bounce of Photon------------------------- isAlive = true; photon_origin = texture2D(u_texture_data_pos, v_texcoord).xyz; vec3 prev_dir = texture2D(u_texture_data_dir, v_texcoord).xyz; vec3 prev_normal = texture2D(u_texture_data_power, v_texcoord).xyz; //Reflection direction = r = I − 2 (I ⋅ n) n photon_dir = prev_dir - 2.0 * dot(prev_dir, prev_normal) * prev_normal; }else if( previous_state == (WPM_STATE_TRANSMITTED) ){ isAlive = false; }else { isAlive = false; } if(isAlive){ RayCollisionOutput current_rco = detectNearestAABBCollision(photon_origin, photon_dir); if(current_rco.matchID > -1){ float r = rng2d(pixel); float stateVal; if(r < current_rco.matProb.x){ // absorbed stateVal = float(WPM_STATE_ABSORBED); }else if(r < current_rco.matProb.x + current_rco.matProb.y){ // reflected stateVal = float(WPM_STATE_REFLECTED); }else{ // transmitted stateVal = float(WPM_STATE_TRANSMITTED); } stateVal = float(WPM_STATE_REFLECTED); ///// <-------------- HACK to TEST gl_FragData[0] = vec4(current_rco.pos, 1.0); // position gl_FragData[1] = vec4(photon_dir, 1.0); // direction gl_FragData[2] = vec4(current_rco.normal, 1.0); // power gl_FragData[3] = vec4(stateVal, current_rco.matchID, prev_state.x, 1.0); // state }else { // photon went out of the scene gl_FragData[0] = vec4(WPM_STATE_NOT_VALID); // position gl_FragData[1] = vec4(WPM_STATE_NOT_VALID); // direction gl_FragData[2] = vec4(WPM_STATE_NOT_VALID); // power gl_FragData[3] = vec4(WPM_STATE_NOT_VALID, WPM_STATE_NOT_VALID, prev_state.x, 1.0); // state } }else{ // Is a dead photon gl_FragData[0] = vec4(WPM_STATE_NOT_VALID); // position gl_FragData[1] = vec4(WPM_STATE_NOT_VALID); // direction gl_FragData[2] = vec4(WPM_STATE_NOT_VALID); // power gl_FragData[3] = vec4(WPM_STATE_NOT_VALID); // state } // DEBUG COMPUTATION } ` })36:T25b9,function ComputePhotonMap(){ // ---------------------INIT-COMPUTE --------------------------- showDebug("--init-Computing--"); const targetTextureWidth = numPhotons; const targetTextureHeight = 1; const ComputingProgram = createProgram(gl, computing_vs, computing_fs); showDebug("ComputeProg : " , ComputingProgram); // Tell it to use our program (pair of shaders) gl.useProgram(ComputingProgram); // Initialize Attributes and Uniforms // ------------Set Attributes for Vertex Shader // --positions const a_positions = c_LocateAttribute("a_position", ComputingProgram, rectangleByTriangles_3fv_Positions, 3, gl.FLOAT); //c_ActivateAttribute(a_positions, 3, gl.FLOAT); // --texcoords const a_texcoords = c_LocateAttribute("a_texcoord", ComputingProgram, rectangleByTriangles_2fv_TexCoords, 2, gl.FLOAT); // -----------Set Uniforms for Fragment Shader // --lightPosMin c_LocateUniform("u_lightPosMin", ComputingProgram, new Float32Array( [-0.125, 0.999, -0.125] ), "3fv"); // --lightPosMax c_LocateUniform("u_lightPosMax", ComputingProgram, new Float32Array( [0.125, 1.001, 0.125] ), "3fv"); // --dimensions (dimensions of the textureTarget) c_LocateUniform("u_dimensions", ComputingProgram, new Float32Array([targetTextureWidth, targetTextureHeight]), "2fv"); // --Transforms of objects const textrure_all_transforms = c_CreateDataTexture(4,7, gl.RGBA, gl.FLOAT, new Float32Array(transformation_matrices)); c_LocateUniform("u_texture_transforms", ComputingProgram, 0, "1i"); // --current status data of photons stored as textures at following texture locations c_LocateUniform("u_texture_data_pos", ComputingProgram, 1, "1i"); c_LocateUniform("u_texture_data_dir", ComputingProgram, 2, "1i"); c_LocateUniform("u_texture_data_power", ComputingProgram, 3, "1i"); c_LocateUniform("u_texture_data_state", ComputingProgram, 4, "1i"); const colorTexture_comp = c_CreateDataTexture(4, 2, gl.RGB, gl.UNSIGNED_BYTE, distinct_colors_3fv); c_LocateUniform("u_texture_colors", ComputingProgram, 5, "1i"); // --------------Setup render target textures for writing-in the computed values // Create target render textures const targetTex_Position = c_CreateTargetTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT); const targetTex_Direction = c_CreateTargetTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT); const targetTex_Power = c_CreateTargetTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT); const targetTex_State = c_CreateTargetTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT); // --------------Setup current state of photons textures with initial photon states const computed_Position = new Float32Array( Array(targetTextureWidth * targetTextureHeight * 4).fill(wpm_states.INITIAL_STATE) ); const computed_Direction = new Float32Array( Array(targetTextureWidth * targetTextureHeight * 4).fill(wpm_states.INITIAL_STATE) ); const computed_Power = new Float32Array( Array(targetTextureWidth * targetTextureHeight * 4).fill(wpm_states.INITIAL_STATE) ); const computed_State = new Float32Array( Array(targetTextureWidth * targetTextureHeight * 4).fill(wpm_states.INITIAL_STATE) ); //showDebug("power: ", computed_Power); let dataTex_Position = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Position); let dataTex_Direction = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Direction); let dataTex_Power = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Power); let dataTex_State = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_State); // The Photon Map let dataset_photonMap = new Float32Array(numPhotons * numPhotonBounces * photonMapElementSize); // Create and bind the framebuffer point and attach the target textures for writing-in const fb = gl.createFramebuffer(); // -------------------------------- COMPUTE ------------------------------- showDebug("--Computing--"); // Shooting photons for(let bounceId = 0; bounceId < numPhotonBounces; ++bounceId) { showDebug("<<< ---- Bounce: " + bounceId + "---- >>>"); // render to our targetTexture by binding the framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, fb); // attach the textures as the data receiving attachments gl.framebufferTexture2D(gl.FRAMEBUFFER, EXTdb.COLOR_ATTACHMENT0_WEBGL, gl.TEXTURE_2D, targetTex_Position, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, EXTdb.COLOR_ATTACHMENT1_WEBGL, gl.TEXTURE_2D, targetTex_Direction, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, EXTdb.COLOR_ATTACHMENT2_WEBGL, gl.TEXTURE_2D, targetTex_Power, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, EXTdb.COLOR_ATTACHMENT3_WEBGL, gl.TEXTURE_2D, targetTex_State, 0); EXTdb.drawBuffersWEBGL([ EXTdb.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0] position EXTdb.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1] direction EXTdb.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2] power EXTdb.COLOR_ATTACHMENT3_WEBGL // gl_FragData[3] state ]); // Compute photons into frame buffer objects using fragment shaders { // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, targetTextureWidth, targetTextureHeight); // Clear the attachment(s). gl.clearColor(0, 0, 1, 1); // clear to blue gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Set textures gl.activeTexture(gl.TEXTURE0 + 0); gl.bindTexture(gl.TEXTURE_2D, textrure_all_transforms); gl.activeTexture(gl.TEXTURE0 + 1); gl.bindTexture(gl.TEXTURE_2D, dataTex_Position); gl.activeTexture(gl.TEXTURE0 + 2); gl.bindTexture(gl.TEXTURE_2D, dataTex_Direction); gl.activeTexture(gl.TEXTURE0 + 3); gl.bindTexture(gl.TEXTURE_2D, dataTex_Power); gl.activeTexture(gl.TEXTURE0 + 4); gl.bindTexture(gl.TEXTURE_2D, dataTex_State); gl.activeTexture(gl.TEXTURE0 + 5); gl.bindTexture(gl.TEXTURE_2D, colorTexture_comp); // Execute shaders to compute values into target textures on framebuffer objects gl.drawArrays(gl.TRIANGLES, 0, 6 ); } // Read photons from fragment shaders into buffers const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT); const type = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE); showDebug("Format : ", ((format == gl.RGBA)? 'RGBA' : format), " Type :",((type == gl.FLOAT)? 'FLOAT' : type)); showDebug("============"); ReadPixelData(computed_Position, targetTextureWidth, targetTextureHeight, targetTex_Position, gl.RGBA, gl.FLOAT); ReadPixelData(computed_Direction, targetTextureWidth, targetTextureHeight, targetTex_Direction, gl.RGBA, gl.FLOAT); ReadPixelData(computed_Power, targetTextureWidth, targetTextureHeight, targetTex_Power, gl.RGBA, gl.FLOAT); ReadPixelData(computed_State, targetTextureWidth, targetTextureHeight, targetTex_State, gl.RGBA, gl.FLOAT); // Save to the photon map { for(let pid = 0; pid < numPhotons; ++pid){ const photonData = [ // computed_Position element size = 4 computed_Position[pid * 4], computed_Position[pid * 4 + 1], computed_Position[pid * 4 + 2], // computed_Direction element size = 4 computed_Direction[pid * 4], computed_Direction[pid * 4 + 1], computed_Direction[pid * 4 + 2], // computed_Power element size = 4 computed_Power[pid * 4], computed_Power[pid * 4 + 1], computed_Power[pid * 4 + 2], computed_Power[pid * 4 + 3], // computed_State element size = 4 computed_State[pid * 4], computed_State[pid * 4 + 1] ]; // dataset_photonMap element size = photonData.length = 12 for(let didx = 0; didx < 14; ++didx){ dataset_photonMap[(bounceId * numPhotons * photonData.length) + (pid * photonData.length) + didx] = photonData[didx]; } } } // Rewrite current_data_textures with new data from the buffers gl.deleteTexture(dataTex_Position); gl.deleteTexture(dataTex_Direction); gl.deleteTexture(dataTex_Power); gl.deleteTexture(dataTex_State); dataTex_Position = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Position); dataTex_Direction = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Direction); dataTex_Power = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_Power); dataTex_State = c_CreateDataTexture(targetTextureWidth, targetTextureHeight, gl.RGBA, gl.FLOAT, computed_State); } // end bounce loop showDebug("============"); // Release resources gl.deleteTexture(targetTex_Position); gl.deleteTexture(targetTex_Direction); gl.deleteTexture(targetTex_Power); gl.deleteTexture(targetTex_State); gl.deleteTexture(dataTex_Position); gl.deleteTexture(dataTex_Direction); gl.deleteTexture(dataTex_Power); gl.deleteTexture(dataTex_State); gl.deleteTexture(colorTexture_comp); gl.deleteTexture(textrure_all_transforms); gl.deleteFramebuffer(fb); gl.deleteProgram(ComputingProgram); //============================================================================== return dataset_photonMap; }37:Tad5,function RenderScene(in_fixedTypeArray_photonMap){ // ------------------------------- INIT-RENDERING ------------------------------ const RenderProgram = createProgram(gl, render_vs, render_fs); showDebug("RenderProg : " , RenderProgram); // Tell it to use our program (pair of shaders) gl.useProgram(RenderProgram); // Initialize Attributes and Uniforms // Set Attributes // --positions const a_positions_rendering = c_LocateAttribute("a_position", RenderProgram, rectangleByTriangles_3fv_Positions, 3, gl.FLOAT); // --texcoords const a_texcoords_rendering = c_LocateAttribute("a_texcoord", RenderProgram, rectangleByTriangles_2fv_TexCoords, 2, gl.FLOAT); // Set Uniforms // --cameraEyeUVW c_LocateUniform("u_cameraEyeUVW", RenderProgram, new Float32Array([0.0, 0.2, 6.0, 1, 0, 0, 0, 1, 0, 0, 0, 1]), "3fv"); // --fov c_LocateUniform("fov", RenderProgram, deg2rad(30), "1f"); // --resolution c_LocateUniform("u_resolution", RenderProgram, new Float32Array([gl.canvas.width, gl.canvas.height]), "2fv"); // --Transforms of objects const textrure_all_transforms = c_CreateDataTexture(4,7, gl.RGBA, gl.FLOAT, new Float32Array(transformation_matrices)); c_LocateUniform("u_texture_transforms", RenderProgram, 0, "1i"); const photonMapTexture = c_CreateDataTexture(4, numPhotons * numPhotonBounces, gl.RGB, gl.FLOAT, in_fixedTypeArray_photonMap); // --Locate UNIFORMs for Textures that were computed by the computation shader c_LocateUniform("u_texture_photonmap", RenderProgram, 1, "1i"); const colorTexture = c_CreateDataTexture(4, 2, gl.RGB, gl.UNSIGNED_BYTE, distinct_colors_3fv); c_LocateUniform("u_texture_colors", RenderProgram, 2, "1i"); // ------------------- RENDER --------------------- { // render to the canvas gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas AND the depth buffer. gl.clearColor(1, 1, 1, 1); // clear to white gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Bind Textures gl.activeTexture(gl.TEXTURE0 + 0); gl.bindTexture(gl.TEXTURE_2D, textrure_all_transforms); gl.activeTexture(gl.TEXTURE0 + 1); gl.bindTexture(gl.TEXTURE_2D, photonMapTexture); gl.activeTexture(gl.TEXTURE0 + 2); gl.bindTexture(gl.TEXTURE_2D, colorTexture); // draw var primitiveType = gl.TRIANGLES; var offset = 0; var count = 6; gl.drawArrays(primitiveType, offset, count); } }38:T46b,function c_LocateAttribute(attrName, theProgram, fixedTypedValuesArray, elementSize, glDataType){ const attrLocation = gl.getAttribLocation(theProgram, attrName); const attrBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, attrBuffer); gl.bufferData(gl.ARRAY_BUFFER, fixedTypedValuesArray, gl.STATIC_DRAW); gl.enableVertexAttribArray(attrLocation); gl.bindBuffer(gl.ARRAY_BUFFER, attrBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) // size = ; // 2 components per iteration (example 2) // type = ; // the data is 32bit floats ( example gl.FLOAT ) var normalize = false; // don't normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer(attrLocation, elementSize, glDataType, normalize, stride, offset); const retval = ({Name: attrName, Buffer: attrBuffer, Location: attrLocation}); showDebug("Attribute: ", attrName, " Loc: ", attrLocation, " Buffer: ", attrBuffer); return retval; }39:T468,function c_CreateDataTexture(textureWidth, textureHeight, glInternalFormat, glDataType, fixedTypedValueArray){ const texture_data = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture_data); { // fill texture with 3x2 pixels const level = 0; const internalFormat = glInternalFormat; const width = textureWidth; const height = textureHeight; const border = 0; const format = glInternalFormat; const type = glDataType; const data = fixedTypedValueArray; //gl.pixelStorei(gl.UNPACK_ALIGNMENT, glAlignment); gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, format, type, data); // set the filtering so we don't need mips and it's not filtered gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } showDebug("Data Texture : ", texture_data); return texture_data; }3a:T246e,myGLSLDefinitions = ` // ----------- OTHER LIBS ----------- ${glslInverseFunctions} ${rngCode} // ---------- COMMON VARIABLES ------- uniform sampler2D u_texture_transforms; vec3 matCols[7]; vec3 matProbs[7]; vec3 matRatios[7]; // loss ratio void initMaterials(){ matCols[0] = vec3(1.0, 0.89, 0.81); matCols[1] = vec3(1.0, 0.90, 0.81); matCols[2] = vec3(1.0,0.99,0.81); matCols[3] = vec3(0.9,0.1,0.1); matCols[4] = vec3(0.1,0.9,0.1); matCols[5] = vec3(1.0,0.69,0.81); matCols[6] = vec3(1.0,0.59,0.81); matProbs[0] = vec3(0.5, 0.5, 0.0); matProbs[1] = vec3(0.5, 0.5, 0.0); matProbs[2] = vec3(0.5, 0.5, 0.0); matProbs[3] = vec3(0.5, 0.5, 0.0); matProbs[4] = vec3(0.5, 0.5, 0.0); matProbs[5] = vec3(0.1, 0.2, 0.7); matProbs[6] = vec3(0.3, 0.3, 0.3); matRatios[0] = vec3(0.1, 0.5, 1.0); matRatios[1] = vec3(0.1, 0.5, 1.0); matRatios[2] = vec3(0.1, 0.5, 1.0); matRatios[3] = vec3(0.1, 0.5, 1.0); matRatios[4] = vec3(0.1, 0.5, 1.0); matRatios[5] = vec3(0.1, 0.5, 1.0); matRatios[6] = vec3(0.1, 0.5, 1.0); } // ---------- CONSTANTS ------------ const float EPSILON = 1e-5; const float INFINITY = 1e5; const float PI = 3.14159265358; const int shadowEnabledIndex = 4; const int numOfTransformations = 7; // ---------- STRUCTS & FUNCTIONS ------------- struct ObjectFeatures { mat4 transform; vec3 matColor; vec3 matProbs; float matRatio; }; struct PhotonData { vec3 pos; vec3 dir; vec3 normal; float power; float state; float hitMatchID; }; struct Ray { vec3 origin; vec3 direction; float tMin; float tMax; }; vec3 pointOnRay(in Ray ray,float t){ return (ray.origin+t*ray.direction); } struct AABB{ vec3 minP; vec3 maxP; }; AABB cannonical_aabb = AABB(vec3(-0.5),vec3(0.5)); float calcMod(float a, float b){ return a - (b * floor(a/b)); // return a mod b } vec2 getDataTextureCoords(float x, float y, float width, float height){ return vec2( (x)/width, (y)/height ); } /* Calculates integer index of the given normalized index (param: nval) on a normalized dimension of expected length */ float getIntIndex(float nval, float length){ return calcMod(nval * length, length); } float getIntIndexFromTexcoord(float texcoordVal, float length){ return ((texcoordVal * length) - 0.5); } mat4 getTransform(int index){ vec4 col0 = texture2D(u_texture_transforms, getDataTextureCoords(0.5, float(index) + 0.5, 4.0, 7.0)); vec4 col1 = texture2D(u_texture_transforms, getDataTextureCoords(1.5, float(index) + 0.5, 4.0, 7.0)); vec4 col2 = texture2D(u_texture_transforms, getDataTextureCoords(2.5, float(index) + 0.5, 4.0, 7.0)); vec4 col3 = texture2D(u_texture_transforms, getDataTextureCoords(3.5, float(index) + 0.5, 4.0, 7.0)); return mat4(col0, col1, col2, col3); } Ray getRay(vec2 pixel, vec2 resolution, float fov, vec3 cameraEye, vec3 cameraU, vec3 cameraV, vec3 cameraW){ Ray ray; ray.origin = cameraEye; float height = 2.*tan(fov/2.); float aspect = resolution.x/resolution.y; float width = height*aspect; vec2 windowDim = vec2(width,height); vec2 pixelSize = windowDim/resolution; vec2 delta = -0.5*windowDim + pixel*pixelSize; ray.direction = normalize(-cameraW + cameraV*delta.y + cameraU*delta.x); ray.tMin = 0.; ray.tMax = INFINITY; return ray; } bool insersectsRayAABB(inout Ray ray, AABB aabb) { vec3 tMin = (aabb.minP.xyz - ray.origin) / ray.direction; vec3 tMax = (aabb.maxP.xyz - ray.origin) / ray.direction; vec3 t1 = min(tMin, tMax); vec3 t2 = max(tMin, tMax); //float tNear = max(max(max(t1.x, t1.y), t1.z),ray.tMin); //float tFar = min(min(min(t2.x, t2.y), t2.z),ray.tMax); float tNear = max(max(t1.x, t1.y), t1.z); float tFar = min(min(t2.x, t2.y), t2.z); if (tNear < tFar){ ray.tMin = tNear; ray.tMax = tFar; return true; } return false; } vec3 getNormal(AABB aabb,vec3 p){ vec3 c = (aabb.minP+aabb.maxP)/2.; vec3 d = p-c; vec3 v = abs(d); int i = v.y > v.x ? ( v.z > v.y ? 2 : 1 ) : ( v.z > v.x ? 2 : 0 ); // Which Sign of the axis: The sign of the component selects the positive or negative direction. return (i == 0) ? ((p.x>=0.)?vec3(1,0,0):vec3(-1,0,0)) : (i == 1) ? ((p.y>=0.)?vec3(0,1,0):vec3(0,-1,0)) : ((p.z>=0.)?vec3(0,0,1):vec3(0,0,-1)); } vec3 getNormalColor(AABB aabb,vec3 p, vec3 c1, vec3 c2, vec3 c3, vec3 c4, vec3 c5, vec3 c6){ vec3 c = (aabb.minP+aabb.maxP)/2.; vec3 d = p-c; vec3 v = abs(d); int i = v.y > v.x ? ( v.z > v.y ? 2 : 1 ) : ( v.z > v.x ? 2 : 0 ); // Which Sign of the axis: The sign of the component selects the positive or negative direction. return (i == 0) ? ((p.x>=0.)?c1:c2) : (i == 1) ? ((p.y>=0.)?c3:c4) : ((p.z>=0.)?c5:c6); } bool insersectsRayCannonicalAABB(inout Ray ray) { return insersectsRayAABB(ray, cannonical_aabb); } bool checkRayVsSphereCollision( vec3 origin, vec3 dir, vec3 center, float radius, inout float out_t){ vec3 O_C = origin - center; float A = dot(dir,dir); float B = 2.0 * dot( dir, O_C); float D = dot(O_C, O_C) - (radius * radius); if ((B * B - 4.0 * A * D) < 0.0){ return false; // not hitting Sphere } float det = sqrt(B * B - 4.0 * A * D); // Far contact: float t1 = (0.0 - B + det) / (2.0 * A); // Output the Near contact: out_t = (0.0 - B - det) / (2.0 * A); return true; // hitting the Sphere } // samplePosUV is such that -0.5 <= u,v <= 0.5 vec3 getRayDirection(vec2 samplePosOffset, vec2 delta, vec3 camU, vec3 camV, vec3 camW){ vec2 sampleDelta = delta + samplePosOffset; return normalize(-camW + camV*sampleDelta.y + camU*sampleDelta.x); } struct AffineSquare { vec2 minPoint; // p0 vec2 p1; vec2 maxPoint; // p2 vec2 p3; }; AffineSquare GenerateAffineSquare(vec2 minPoint, vec2 maxPoint) { // Quadrilataral Affine Transformation of a Point AffineSquare as; as.minPoint = minPoint; // p0 as.p1 = vec2(maxPoint.x, minPoint.y); as.maxPoint = maxPoint; // p2 as.p3 = vec2(minPoint.x, maxPoint.y); return as; } vec2 getAffineUVPos(AffineSquare as, float u, float v) { return (1.0 - v) * ( (1.0 - u) * as.minPoint + u * as.p1 ) + v * ( (1.0 - u) * as.p3 + u * as.maxPoint ); } vec3 getLightPosSample_Square(AffineSquare ASLight, float rnd_u, float rnd_v, float lightPosY) { vec2 this_randomlightpos2D = getAffineUVPos(ASLight, rnd_u, rnd_v); return vec3(this_randomlightpos2D.x, lightPosY, this_randomlightpos2D.y); } struct RayCollisionOutput { float tmin; // collision tmin value int matchID; // colliding object index Ray matchInvRay; // colliding object's inverse transformation matrix vec3 pos; // hitpos vec3 normal; // hitnormal vec3 matCol; // surface color vec3 matProb; vec3 matRatio; }; // Used for both shadow test and ray-scene intersection RayCollisionOutput detectNearestAABBCollision(vec3 rayOrigin, vec3 rayDirection){ // Storage of matching collision: RayCollisionOutput retVal; retVal.tmin = INFINITY; // collision tmin value retVal.matchID = -1; // colliding object index Ray ray = Ray(rayOrigin, rayDirection, 0.0, INFINITY); // ---------Iterate over each object for collision------- for(int i=0; i < numOfTransformations; i++){ //if (ignoreIdx != i){ Ray invRay = ray; //invRay.direction = ray.direction; mat4 mt = getTransform(i); // the transform mat4 imt = inverse(mt); // inverse transform // apply transform to ray vec4 transformedRayOrigin = imt * vec4(invRay.origin, 1.0); vec4 transformedRayDir = imt * vec4(invRay.direction, 0.0); invRay.origin = transformedRayOrigin.xyz; invRay.direction = transformedRayDir.xyz; // compute tmin if (insersectsRayCannonicalAABB(invRay)){ if(invRay.tMin < retVal.tmin){ retVal.tmin = invRay.tMin; retVal.matchID = i; retVal.matchInvRay = invRay; vec3 q = pointOnRay(invRay, invRay.tMin); // hitpoint on cannonical scene retVal.pos = pointOnRay(ray, invRay.tMin); // hitpoint on real scene vec3 N = getNormal(cannonical_aabb, q); // normal on cannonical aabb vec4 realN4 = getTransform(i) * vec4(N,0.0); // normal on real scene homogenous vector retVal.normal = normalize(vec3(realN4[0], realN4[1], realN4[2])); // normal on real scene retVal.matCol = matCols[i]; // color of surface retVal.matProb = matProbs[i]; retVal.matRatio = matRatios[i]; } } //} } return retVal; } vec3 getRandomHemisphereSample(vec3 realNormal, vec3 hitpos, float randomZ, float randomPhi){ float r = sqrt(1.0 - randomZ * randomZ); vec3 d = vec3(hitpos.x + r * cos(randomPhi), hitpos.y + r * sin(randomPhi), hitpos.z + randomZ); //--find U,V,W such that Normal == W and U,V,W are orthogonal vec3 tempVector = realNormal; if (abs(realNormal.x) < abs(realNormal.y) && abs(realNormal.x) < abs(realNormal.z)) tempVector.x = 1.0; else if (abs(realNormal.y) < abs(realNormal.x) && abs(realNormal.y) < abs(realNormal.z)) tempVector.y = 1.0; else tempVector.z = 1.0; vec3 U = normalize(cross(tempVector,realNormal)); vec3 V = cross(realNormal,U); vec3 W = realNormal; //-- vec3 dsample = vec3(dot(d, U) , dot(d, V), dot(d, W)); return normalize(dsample); } `3b:T4d0,rngCode = ` float startTime = float(${rng_seed}) + 1.1; // Gold Noise ©2015 dcerisano@standard3d.com // - based on the Golden Ratio // - uniform normalized distribution // - fastest static noise generator function (also runs at low precision) float PHI = 1.61803398874989484820459; // Φ = Golden Ratio float gold_noise_rng(in vec2 xy, in float seed){ return fract(tan(distance(xy*PHI, xy)*seed)*xy.x); } float rng2d(vec2 xy){ startTime = startTime + 1.1; return gold_noise_rng(xy + vec2(1.1), fract(startTime)); } float GPURnd(inout vec4 n) { // Based on the post http://gpgpu.org/forums/viewtopic.php?t=2591&sid=17051481b9f78fb49fba5b98a5e0f1f3 // (The page no longer exists as of March 17th, 2015. Please let me know if you see why this code works.) const vec4 q = vec4( 1225.0, 1585.0, 2457.0, 2098.0); const vec4 r = vec4( 1112.0, 367.0, 92.0, 265.0); const vec4 a = vec4( 3423.0, 2646.0, 1707.0, 1999.0); const vec4 m = vec4(4194287.0, 4194277.0, 4194191.0, 4194167.0); vec4 beta = floor(n / q); vec4 p = a * (n - beta * q) - beta * r; beta = (sign(-p) + vec4(1.0)) * vec4(0.5) * m; n = (p + beta); return fract(dot(n / m, vec4(1.0, -1.0, 1.0, -1.0))); } `3c:T8c9,glslInverseFunctions = ` float inverse(float m) { return 1.0 / m; } mat2 inverse(mat2 m) { return mat2(m[1][1],-m[0][1], -m[1][0], m[0][0]) / (m[0][0]*m[1][1] - m[0][1]*m[1][0]); } mat3 inverse(mat3 m) { float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2]; float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2]; float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2]; float b01 = a22 * a11 - a12 * a21; float b11 = -a22 * a10 + a12 * a20; float b21 = a21 * a10 - a11 * a20; float det = a00 * b01 + a01 * b11 + a02 * b21; return mat3(b01, (-a22 * a01 + a02 * a21), (a12 * a01 - a02 * a11), b11, (a22 * a00 - a02 * a20), (-a12 * a00 + a02 * a10), b21, (-a21 * a00 + a01 * a20), (a11 * a00 - a01 * a10)) / det; } mat4 inverse(mat4 m) { float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2], a03 = m[0][3], a10 = m[1][0], a11 = m[1][1], a12 = m[1][2], a13 = m[1][3], a20 = m[2][0], a21 = m[2][1], a22 = m[2][2], a23 = m[2][3], a30 = m[3][0], a31 = m[3][1], a32 = m[3][2], a33 = m[3][3], b00 = a00 * a11 - a01 * a10, b01 = a00 * a12 - a02 * a10, b02 = a00 * a13 - a03 * a10, b03 = a01 * a12 - a02 * a11, b04 = a01 * a13 - a03 * a11, b05 = a02 * a13 - a03 * a12, b06 = a20 * a31 - a21 * a30, b07 = a20 * a32 - a22 * a30, b08 = a20 * a33 - a23 * a30, b09 = a21 * a32 - a22 * a31, b10 = a21 * a33 - a23 * a31, b11 = a22 * a33 - a23 * a32, det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06; return mat4( a11 * b11 - a12 * b10 + a13 * b09, a02 * b10 - a01 * b11 - a03 * b09, a31 * b05 - a32 * b04 + a33 * b03, a22 * b04 - a21 * b05 - a23 * b03, a12 * b08 - a10 * b11 - a13 * b07, a00 * b11 - a02 * b08 + a03 * b07, a32 * b02 - a30 * b05 - a33 * b01, a20 * b05 - a22 * b02 + a23 * b01, a10 * b10 - a11 * b08 + a13 * b06, a01 * b08 - a00 * b10 - a03 * b06, a30 * b04 - a31 * b02 + a33 * b00, a21 * b02 - a20 * b04 - a23 * b00, a11 * b07 - a10 * b09 - a12 * b06, a00 * b09 - a01 * b07 + a02 * b06, a31 * b01 - a30 * b03 - a32 * b00, a20 * b03 - a21 * b01 + a22 * b00) / det; } `3d:Ta2d,{ const maxPoints = 5; //--sorted list implementation => (keyValue, Value, Next) where Next is nearest smaller keyValue's Index const sortedList = Array(maxPoints * 3).fill(-100); let sortedListMaxIndex = 0; // Head as the maximum value let countItems = 0; function sortedListInsert(in_itemValue, in_keyValue){ console.log("Inserting: ", in_keyValue); if (countItems < maxPoints){ sortedList[countItems * 3 + 0] = in_keyValue; sortedList[countItems * 3 + 1] = in_itemValue; if (countItems > 0){ if(in_keyValue <= sortedList[sortedListMaxIndex * 3]){ let prev = sortedListMaxIndex; let cur = sortedList[sortedListMaxIndex * 3 + 2]; while(cur != -1 && in_keyValue <= sortedList[cur * 3]){ console.log(prev, cur); prev = cur; cur = sortedList[prev * 3 + 2]; } console.log(prev, cur, countItems); sortedList[prev * 3 + 2] = countItems; sortedList[countItems * 3 + 2] = cur; }else{ sortedList[countItems * 3 + 2] = sortedListMaxIndex; sortedListMaxIndex = countItems; console.log("new max at: ", sortedListMaxIndex); } }else{ sortedList[countItems * 3 + 2] = -1; } ++countItems; }else{ console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxx"); if(in_keyValue <= sortedList[sortedListMaxIndex * 3]){ const saveLoc = sortedListMaxIndex; let prev = sortedListMaxIndex; let cur = sortedList[sortedListMaxIndex * 3 + 2]; while(cur != -1 && in_keyValue <= sortedList[cur * 3]){ console.log(prev, cur); prev = cur; cur = sortedList[prev * 3 + 2]; } console.log(prev, cur, saveLoc); sortedListMaxIndex = sortedList[sortedListMaxIndex * 3 + 2]; console.log("new max at: ", sortedListMaxIndex); sortedList[prev * 3 + 2] = saveLoc; sortedList[saveLoc * 3 + 0] = in_keyValue; sortedList[saveLoc * 3 + 1] = in_itemValue; sortedList[saveLoc * 3 + 2] = cur; }else{ console.log("Too large. Value ignored."); } } } console.log(sortedList); sortedListInsert(5,5); console.log(sortedList); sortedListInsert(6,6); console.log(sortedList); sortedListInsert(6,6); console.log(sortedList); sortedListInsert(2,2); console.log(sortedList); sortedListInsert(7,7); console.log(sortedList); sortedListInsert(2,2); console.log(sortedList); //--sorted list end }3e:T111a,function kdNearestNeighborsInRange(in_array, in_elementSize, in_numDimensions, in_searchPoint, in_searchRadius, in_maxPoints){ if(in_array.length < 1){ return []; } const retVals = Array(in_maxPoints).fill(-1); let foundCount = 0; //--sorted list implementation => (keyValue, Value, Next) where Next is nearest smaller keyValue's Index const sortedList = Array(in_maxPoints * 3).fill(-1).map((d,i) => (i % 3 == 2)? 1 + Math.floor(i/3) : -1); let sortedListMaxIndex = 0; // Head as the maximum value let nextLoc = 0; function sortedListInsert(in_itemValue, in_keyValue){ let cur = sortedListMaxIndex; let prev = -1; while(in_keyValue <= sortedList[cur]){ // equal values are also stored prev = cur; cur = sortedList[cur + 2]; // next smallest value } sortedList[nextLoc] = in_keyValue; sortedList[nextLoc + 1] = in_itemValue; sortedList[nextLoc + 2] = cur; sortedList[prev + 2] = nextLoc; nextLoc = sortedList[nextLoc]; if(in_maxPoints <= nextLoc){ nextLoc = sortedListMaxIndex; } } //--sorted list end //--stack begin implementation const stack = Array(in_array.length).fill(-1); const stackElementSize = 2; let stackPointer = -stackElementSize; function stackPush(in_stackElementArray, in_startIndex){ // StackPush: copies the elements to stackArray and updates the stack pointer stackPointer += stackElementSize; for(let idx = 0; idx < stackElementSize; ++idx){ stack[stackPointer + idx] = in_stackElementArray[in_startIndex + idx]; } } function stackPop(){ // Pop: returns the index to the stack elements and updates the stack pointer. // User must use the data before pushing to the stack again. stackPointer -= stackElementSize; return stackPointer + stackElementSize; } //--stack end const numElements = in_array.length / in_elementSize; const sqrSearchDist = in_searchRadius * in_searchRadius; let foundMaxSqrDist = sqrSearchDist; console.log("searching for: " + sqrSearchDist); const retVal = []; stackPush([0, 0], 0); console.log("------------"); let count = 0; while(0 <= stackPointer && stackPointer < in_array.length){ if(count++ > 10) break; console.log("stackPointer: " + stackPointer + "\n stack: ", stack); const stackIdx = stackPop(); const curElementIdx = stack[stackIdx]; const depth = stack[stackIdx + 1]; console.log("index: " + curElementIdx + " depth: " + depth); console.log("currentElement: ", printElement(in_array, in_elementSize, curElementIdx)); const arrayIndex = getElementIndex(in_elementSize, curElementIdx); const curSqrDist = calcSquaredDistance(in_numDimensions, in_array, arrayIndex, in_searchPoint, 0); console.log("dist to point: " + curSqrDist); if(curSqrDist <= sqrSearchDist){ console.log("Found: ", printElement(in_array, in_elementSize, curElementIdx)); retVals[foundCount] = curElementIdx; ++foundCount; if(foundCount > in_maxPoints){ //break; } } const dim = depth % in_numDimensions; console.log("dimension: " + dim); let goodSide = -1; let badSide = -1; if(in_searchPoint[dim] < in_array[curElementIdx + dim]){ console.log("less than cur " + in_searchPoint[dim] + " < " + in_array[curElementIdx + dim]); goodSide = in_array[getLeftIndex(in_elementSize, curElementIdx, dim)]; badSide = in_array[getRightIndex(in_elementSize, curElementIdx, dim)]; }else{ console.log("greater than cur " + in_searchPoint[dim] + " >= " + in_array[curElementIdx + dim]); goodSide = in_array[getRightIndex(in_elementSize, curElementIdx, dim)]; badSide = in_array[getLeftIndex(in_elementSize, curElementIdx, dim)]; } console.log("goodSide: " + goodSide + " badSide: " + badSide); if(badSide != -1){ const sqrBadSideDist = (in_searchPoint[dim] - in_array[curElementIdx + dim]) * (in_searchPoint[dim] - in_array[curElementIdx + dim]); console.log("Bad Side check : " + sqrBadSideDist + " < " + sqrSearchDist + " ? ") if(sqrBadSideDist < sqrSearchDist){ console.log("pushing bad side"); stackPush([badSide, depth + 1], 0); } } if(goodSide != -1){ console.log("pushing good side"); stackPush([goodSide,depth + 1], 0); } } return retVals; }3f:T413,function generateKdTreeFromArray(in_array, in_elementSize, in_numDimensions){ if(in_array.length < 1){ return []; } const numElements = in_array.length / in_elementSize; // As root is at index 0, continue setting up the rest starting from index 1 for(let newItmIdx = 1; newItmIdx < numElements; ++newItmIdx){ let depth = 0; let curIdx = 0; while(curIdx < numElements){ const curDim = depth % in_numDimensions; if(in_array[getKeyIndex(in_elementSize, newItmIdx, curDim)] < in_array[getKeyIndex(in_elementSize, curIdx, curDim)]){ const leftIdx = getLeftIndex(in_elementSize, curIdx); if(in_array[leftIdx] == -1){ in_array[leftIdx] = newItmIdx; break; } curIdx = in_array[leftIdx]; }else{ const rightIdx = getRightIndex(in_elementSize, curIdx); if(in_array[rightIdx] == -1){ in_array[rightIdx] = newItmIdx; break; } curIdx = in_array[rightIdx]; } ++depth; } } return in_array; }40:[] 32:{"id":"b3958e75a463139b","slug":"webgl_photon_mapping","title":"WebGL Photon Map Global Illumination","thumbnail":"af6f0335ad7323327ce6efc2b428b3220cb4829f2ce1e17b53fb1c0f7d675eae","access_level":"public","create_time":"$D2021-04-29T14:58:00.289Z","update_time":"$D2022-03-21T09:41:56.205Z","view_time":null,"first_public_time":"$D2021-04-29T15:05:54.942Z","has_unpublished_edits":null,"fork":{"id":"178c2f6e144ac4fc","slug":"webgl_tests","title":"WebGL","owner":{"id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath"}},"stars":1,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":3024,"publish_version":3024,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"},{"type":"individual","id":"b88bbee206bfc579","login":"ujoa","name":"Juan Parra","avatar_url":"https://avatars-next.observableusercontent.com/851c55b4c8036fbd41ab7e9c1a9572933269aca241129ec2ce143341716117fe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"WebGL Photon Map Global Illumination","cells":[{"id":0,"value":"md`# WebGL Photon Map Global Illumination`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"viewof lightInput = columns({\n ypos : slider({\n title: \"Light Y-Pos\",\n min: -1.5,\n max: 1.5,\n step: 0.05,\n value: 1.01\n }),\n length : slider({\n title: \"Light Length\",\n min: 0.01,\n max: 2.0,\n step: 0.01,\n value: 0.25\n }),\n width : slider({\n title: \"Light Width\",\n min: 0.01,\n max: 2.0,\n step: 0.01,\n value: 0.25\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"lightHeight = lightInput.ypos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"lpmin = [-lightInput.width/2, lightHeight - 0.001, -lightInput.length/2] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"lpmax = [lightInput.width/2, lightHeight + 0.001, lightInput.length/2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"{\n const extNames = ['WEBGL_draw_buffers','OES_texture_float'];\n const allSupported = gl.getSupportedExtensions();\n let retStr = '\\nRequried extensions for this notebook and their compatibility with current browser:\\n';\n for(let i=0; i < extNames.length; ++i){\n retStr = retStr + extNames[i] + ' : ' + allSupported.includes('WEBGL_draw_buffers') + '\\n';\n }\n return retStr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"EXTdb = gl.getExtension('WEBGL_draw_buffers');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"EXTtf = gl.getExtension('OES_texture_float');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"screenPixelHeight = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"screenPixelWidth = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"numPhotons = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"numPhotonBounces = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2871,"value":"rng_seed = Date.now()/1000000000.0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2953,"value":"viewof chinputs = checkbox([\"Show Console Debug\", \"Expand Debug Arrays\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2956,"value":"debugging_arrays = chinputs.includes(\"Expand Debug Arrays\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2759,"value":"debugging = chinputs.includes(\"Show Console Debug\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"canvas = DOM.canvas(screenPixelWidth, screenPixelHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"errorBlock = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"mutable errorLog = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"RunAll()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"function RunAll(){\n const fixedTypeArray_PhotonMap = ComputePhotonMap();\n showDebug('============================');\n showDebug(fixedTypeArray_PhotonMap);\n if(debugging && debugging_arrays)\n for(let i = 0; i < fixedTypeArray_PhotonMap.length / photonMapElementSize; i++){\n showDebug(fixedTypeArray_PhotonMap.slice(i * photonMapElementSize, i * photonMapElementSize + photonMapElementSize));\n if(i == 100) break;\n }\n showDebug('============================');\n RenderScene(fixedTypeArray_PhotonMap);\n return md`### WebGL All Programmes Run`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"fs_commonMacros = `\n#define WPM_STATE_NOT_VALID (${wpm_states.NOT_VALID})\n#define WPM_STATE_INIT (${wpm_states.INITIAL_STATE})\n#define WPM_STATE_ABSORBED (${wpm_states.ABSORBED})\n#define WPM_STATE_REFLECTED (${wpm_states.REFLECTED})\n#define WPM_STATE_TRANSMITTED (${wpm_states.TRANSMITTED})\n\n#define WPM_PHOTONMAP_LENGTH (${numPhotons * numPhotonBounces})\n\n#define WPM_PHOTONMAP_ELEMENTSIZE (${photonMapElementSize})\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2726,"value":"photonMapElementSize = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"wpm_states = ({ NOT_VALID : -200, INITIAL_STATE : -1, ABSORBED : 128, REFLECTED : 129, TRANSMITTED : 130 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"function ReadPixelData(in_ArrayBufferView, in_targetTextureWidth, in_targetTextureHeight, in_targetTex, in_glFormat, in_glType){ \n const fb_reader = gl.createFramebuffer();\n gl.bindFramebuffer(gl.FRAMEBUFFER, fb_reader);\n gl.framebufferTexture2D(gl.FRAMEBUFFER, EXTdb.COLOR_ATTACHMENT0_WEBGL, gl.TEXTURE_2D, in_targetTex, 0);\n\n gl.readPixels(0, 0, in_targetTextureWidth, in_targetTextureHeight, in_glFormat, in_glType, in_ArrayBufferView);\n \n gl.deleteFramebuffer(fb_reader);\n \n showDebug(\"Pixels :\\n\",in_ArrayBufferView,\"\\nDone.\");\n showDebug(in_targetTextureWidth, in_targetTextureHeight);\n \n if(debugging && debugging_arrays)\n for(let i = 0; i < in_ArrayBufferView.length / 4; i++){\n showDebug(in_ArrayBufferView.slice(i * 4, i * 4 + 4));\n if(i == 100) break;\n }\n \n return in_ArrayBufferView;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"function c_LocateUniform(unfmName, theProgram, fixedTypedValueArray, uniformFunctionOptions){\n const uniformLocation = gl.getUniformLocation(theProgram, unfmName);\n showDebug(`uniform : ${uniformFunctionOptions} : `, unfmName, \" : \", uniformLocation, \" value: \", fixedTypedValueArray);\n gl[\"uniform\" + uniformFunctionOptions](uniformLocation, fixedTypedValueArray );\n return uniformLocation;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"function c_LocateUniformMatrix(unfmName, theProgram, fixedTypedValueArray, uniformMatrixFunctionOptions){\n const uniformLocation = gl.getUniformLocation(theProgram, unfmName);\n showDebug(`uniformMatrix : ${uniformMatrixFunctionOptions} : `, unfmName, \" : \", uniformLocation, \" ValueArrayLength: \", fixedTypedValueArray.length);\n gl[ \"uniformMatrix\" + uniformMatrixFunctionOptions](uniformLocation, false, fixedTypedValueArray );\n return uniformLocation;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"function c_CreateTargetTexture(in_targetTextureWidth, in_targetTextureHeight, in_glInternalformat, in_glDataType){\n \n const targetTexture = gl.createTexture();\n \n gl.bindTexture(gl.TEXTURE_2D, targetTexture);\n \n // define size and format of level 0\n const level = 0;\n const internalFormat = in_glInternalformat;\n const border = 0;\n const format = in_glInternalformat;\n const type = in_glDataType;\n const data = null;\n gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,\n in_targetTextureWidth, in_targetTextureHeight, border,\n format, type, data);\n \n // set the filtering so we don't need mips\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n \n return targetTexture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"transformation_matrices = {\n const mtfloor = Array.from(getTransformation([0,-1.05,0],0,[2,0.1,2]));\n const mtroof = Array.from(getTransformation([0,1.05,0],0,[2,0.1,2]));\n const mtwallback = Array.from(getTransformation([0,0,-1.05],0,[2.2,2.2,0.1]));\n const mtwallleft = Array.from(getTransformation([-1.05,0,0],0,[0.1,2.2,2.0]));\n const mtwallright = Array.from(getTransformation([1.05,0,0],0,[0.1,2.2,2]));\n const mtbigbox = Array.from(getTransformation([-0.25,-0.25,-0.25],-30 * Math.PI / 180,[0.6,1.5,0.6]));\n const mtsmallbox = Array.from(getTransformation([0.25,-0.75,0.25],30 * Math.PI / 180,[0.6,0.6,0.6]));\n \n return mtfloor.concat(mtroof, mtwallback, mtwallleft, mtwallright, mtbigbox, mtsmallbox);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"getTransformation = (translate, rotate, scale) => {\n const scaleM = twgl.m4.scaling(scale);\n const rotateM = twgl.m4.rotateY(twgl.m4.identity(), rotate);\n const translateM = twgl.m4.translation(translate);\n return twgl.m4.multiply(translateM, twgl.m4.multiply(rotateM, scaleM));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"render_vs = createShader(gl, gl.VERTEX_SHADER, render_shader_code.vs);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"render_fs = createShader(gl, gl.FRAGMENT_SHADER, render_shader_code.fs);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"computing_vs = createShader(gl, gl.VERTEX_SHADER, computing_shader_code.vs);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"computing_fs = createShader(gl, gl.FRAGMENT_SHADER, computing_shader_code.fs);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function createShader(gl, type, source) {\n var shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);\n if (success) {\n return shader;\n }\n\n console.log(readGLError(gl.getShaderInfoLog(shader), source, type));\n gl.deleteShader(shader);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2764,"value":"function showDebug(...in_params){\n if(debugging) console.log(...in_params);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"function readGLError(msg, src, type){\n const lines = src.split('\\n');\n const regex = /[0-9]:[0-9]+/g;\n const msglines = msg.split('\\n');\n for(var i = 0;i < msglines.length;i++){\n const foundVal = msglines[i].match(regex);\n if(foundVal != null && foundVal.length > 0){\n const str_errorPos = foundVal[0].substring(2,5);\n const errLine = parseInt(foundVal[0].substring(2,5)) - 1;\n mutable errorLog = mutable errorLog + \"\\nERROR in : \" + ((type == gl.VERTEX_SHADER)?\"Vertex Shader\":\"Fragment Shader\") + \" at \" + str_errorPos + '\\n' +\n msglines[i] + '\\n' +\n (lines.slice(errLine - 5, errLine + 5).map((s,ln) => (errLine - 4 + ln) + \" : \" + s)).join('\\n') + '\\n--------------';\n }\n }\n return msg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"function createProgram(gl, vertexShader, fragmentShader) {\n var program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n var success = gl.getProgramParameter(program, gl.LINK_STATUS);\n if (success) {\n return program;\n }\n\n console.log(gl.getProgramInfoLog(program));\n gl.deleteProgram(program);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2806,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"gl = {\n const gl = canvas.getContext('experimental-webgl', { antialias: true });\n gl.clearColor(0,0,0, 1); // Choose a clear color\n gl.clear(gl.COLOR_BUFFER_BIT);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2311,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2319,"value":"a = new Float32Array(b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2326,"value":"b = {\n const aa = Array(10).fill(1).map( (x,j) => (Array(6).fill(1).map((d,i) => Math.floor(Math.random() * 10) )) ).flat();\n for(let i=0; i < aa.length; ++i){\n if(i % 6 > 3) aa[i] = -1;\n }\n return aa;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2539,"value":"printElement(a, 6, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2527,"value":"function printElement(in_array, in_elementSize, in_index){\n const startIdx = getElementIndex(in_elementSize, in_index);\n const ret = in_array.slice(startIdx, startIdx + in_elementSize);\n //console.log(ret);\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2422,"value":"printkdTree(a, 6, 2, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2413,"value":"function printkdTree(in_array, in_elementSize, in_numDimensions, in_index){\n const idx = getElementIndex(in_elementSize, in_index);\n console.log(...in_array.slice(idx,idx+in_numDimensions),\": \", in_array[idx+in_elementSize-2], in_array[idx+in_elementSize-1]);\n const leftIdx = in_array[getLeftIndex(in_elementSize, in_index)];\n const rightIdx = in_array[getRightIndex(in_elementSize, in_index)];\n if(leftIdx != -1){ printkdTree(in_array, in_elementSize, in_numDimensions, leftIdx); }\n if(rightIdx != -1){ printkdTree(in_array, in_elementSize, in_numDimensions, rightIdx); }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"generateKdTreeFromArray(a, 6, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"function getElementIndex(in_elementSize, in_index){\n return in_index * in_elementSize;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"function getKeyIndex(in_elementSize, in_index, in_dimension){\n return in_index * in_elementSize + in_dimension;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2368,"value":"function getRightIndex(in_elementSize, in_index){\n return in_index * in_elementSize + in_elementSize - 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"function getLeftIndex(in_elementSize, in_index){\n return in_index * in_elementSize + in_elementSize - 2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2590,"value":"Array(a.length/6).fill(0).map((d,i) => printElement(a, 6, i))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2586,"value":"foundNbrs.map(d => printElement(a, 6, d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2581,"value":"foundNbrs.map(d => calcSquaredDistance(2, printElement(a, 6, d), 0, [0,0], 0) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2510,"value":"foundNbrs = kdNearestNeighborsInRange(a, 6, 2, [0,0], 9, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"Array(6 * 3).fill(-1).map((d,i) => (i % 3 == 2)? (1 + Math.floor(i/3)) % 6 : 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2670,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2443,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2471,"value":"function calcSquaredDistance(in_numDimensions, in_arrayA, in_startIndexA, in_arrayB, in_startIndexB){\n let sqrSum = 0;\n for(let dim = 0; dim < in_numDimensions; ++dim){\n const pdim = in_arrayA[in_startIndexA + dim];\n const qdim = in_arrayB[in_startIndexB + dim];\n sqrSum += (pdim - qdim) * (pdim - qdim);\n }\n return sqrSum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2314,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"deg2rad = deg => (deg * Math.PI) / 180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"rectangleByTriangles_3fv_Positions = new Float32Array(\n [-1, -1, 0,\n 1, -1, 0, \n -1, 1, 0, \n -1, 1, 0, \n 1, -1, 0, \n 1, 1, 0]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"rectangleByTriangles_2fv_TexCoords = new Float32Array(\n [0, 0,\n 1, 0, \n 0, 1, \n 0, 1, \n 1, 0, \n 1, 1]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"distinct_colors_3fv = new Uint8Array(\n [255, 0, 0,\n 0, 255, 0,\n 0, 0, 255,\n 128,128,128,\n \n 255, 255, 0,\n 255, 0, 255,\n 0, 255, 255,\n 192,192,192\n ]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"twgl = require(\"twgl.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"import {slider} from '@bartok32/diy-inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 33:"$32:body"