44:["$","title",null,{"children":"Pirate Ship Test | Thomas Stoeckert | Observable"}] 4c:T514,{ const baseUniforms = { // Basic matrices for use with camera position viewMatrix: cameraMatrices["view"], projectionMatrix: cameraMatrices["projection"], } let start, previousTimeStamp; let request = requestAnimationFrame(function render(time) { if(previousTimeStamp === undefined) start = time; const elapsed = time - start; previousTimeStamp = time; baseUniforms.time = time; baseUniforms.deltaTime = elapsed; // Render the ocean renderBlock(objectInfoArrays, waterProgram, {...baseUniforms, ...oceanUniforms}, true); // Render the pirate ship shipUniforms.modelMatrix = createShipMatrix(m4.identity, time); renderBlock(pirateModelInfoArray, pirateProgram, {...baseUniforms, ...shipUniforms}, false); gl.useProgram(pirateProgram.program); twgl.setUniforms(pirateProgram, {...baseUniforms, ...shipUniforms}); pirateModelInfoArray.forEach((bufferInfo) => { twgl.setBuffersAndAttributes(gl, pirateProgram, bufferInfo); twgl.drawBufferInfo(gl, bufferInfo); }); request = requestAnimationFrame(render); }); invalidation.then(() => cancelAnimationFrame(request)); return md`This is the main body of the rendering code`; }4d:T85f,generatedPlaneObject = { const scale = planeOptions.size / planeOptions.resolution; // Prepare our mandatory pieces of information const objectName = "generatedPlaneObj"; const modelMatrix = m4.identity(); // Create our sc object const sc = {}; // Create our points const centerPoint = planeOptions.size / 2 const positions = [] const normals = []; for (let resPointX = 0; resPointX < planeOptions.resolution; ++resPointX) { for (let resPointY = 0; resPointY < planeOptions.resolution; ++resPointY) { // Generate this point const thisPoint = v3.create(resPointX * scale, 0.0, resPointY * scale); // Generate a normal for this point const thisNormal = v3.create(0, 0, 1); positions.push(thisPoint); normals.push(thisNormal); } } const triangles = new Uint16Array(planeOptions.resolution * planeOptions.resolution * 6); for (let ti = 0, vi = 0, y = 0; y < planeOptions.resolution - 1; y++, vi++) { for (let x = 0; x < planeOptions.resolution - 1; x++, ti += 6, vi++) { triangles[ti] = vi; triangles[ti + 3] = triangles[ti + 2] = vi + 1; triangles[ti + 4] = triangles[ti + 1] = vi + planeOptions.resolution; triangles[ti + 5] = vi + planeOptions.resolution + 1; } } // Create the basic array from our fancy arrays. const numPoints = positions.length; let formalPositions = new Float32Array(numPoints * 3); let formalNormals = new Float32Array(numPoints * 3); for (let pointIndex = 0; pointIndex < numPoints; ++pointIndex) { const arrayIndex = pointIndex * 3; const position = positions[pointIndex]; const normal = normals[pointIndex]; formalPositions[arrayIndex] = position[0]; formalPositions[arrayIndex + 1] = position[1]; formalPositions[arrayIndex + 2] = position[2]; formalNormals[arrayIndex] = normal[0]; formalNormals[arrayIndex + 1] = normal[1]; formalNormals[arrayIndex + 2] = normal[2]; } sc.positions = formalPositions; sc.normals = formalNormals; sc.indices = triangles; return [{ name: objectName, modelMatrix: modelMatrix, sc: sc }] }4e:T1220,waterShaders = { const vertexShader = `#version 300 es in vec3 position; in vec3 normal; uniform mat4 modelMatrix; uniform mat4 viewMatrix; uniform mat4 projectionMatrix; uniform vec3 wave1Settings; uniform vec3 wave2Settings; uniform float time; uniform float deltaTime; out vec3 fragNormal; // The normal vector of the fragment - associated with the gl_position out vec3 fragPosition; out float deltaTransform; // Noise vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); } float noise(vec3 P) { vec3 i0 = mod289(floor(P)), i1 = mod289(i0 + vec3(1.0)); vec3 f0 = fract(P), f1 = f0 - vec3(1.0), f = fade(f0); vec4 ix = vec4(i0.x, i1.x, i0.x, i1.x), iy = vec4(i0.yy, i1.yy); vec4 iz0 = i0.zzzz, iz1 = i1.zzzz; vec4 ixy = permute(permute(ix) + iy), ixy0 = permute(ixy + iz0), ixy1 = permute(ixy + iz1); vec4 gx0 = ixy0 * (1.0 / 7.0), gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5; vec4 gx1 = ixy1 * (1.0 / 7.0), gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5; gx0 = fract(gx0); gx1 = fract(gx1); vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0), sz0 = step(gz0, vec4(0.0)); vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1), sz1 = step(gz1, vec4(0.0)); gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5); gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5); vec3 g0 = vec3(gx0.x,gy0.x,gz0.x), g1 = vec3(gx0.y,gy0.y,gz0.y), g2 = vec3(gx0.z,gy0.z,gz0.z), g3 = vec3(gx0.w,gy0.w,gz0.w), g4 = vec3(gx1.x,gy1.x,gz1.x), g5 = vec3(gx1.y,gy1.y,gz1.y), g6 = vec3(gx1.z,gy1.z,gz1.z), g7 = vec3(gx1.w,gy1.w,gz1.w); vec4 norm0 = taylorInvSqrt(vec4(dot(g0,g0), dot(g2,g2), dot(g1,g1), dot(g3,g3))); vec4 norm1 = taylorInvSqrt(vec4(dot(g4,g4), dot(g6,g6), dot(g5,g5), dot(g7,g7))); g0 *= norm0.x; g2 *= norm0.y; g1 *= norm0.z; g3 *= norm0.w; g4 *= norm1.x; g6 *= norm1.y; g5 *= norm1.z; g7 *= norm1.w; vec4 nz = mix(vec4(dot(g0, vec3(f0.x, f0.y, f0.z)), dot(g1, vec3(f1.x, f0.y, f0.z)), dot(g2, vec3(f0.x, f1.y, f0.z)), dot(g3, vec3(f1.x, f1.y, f0.z))), vec4(dot(g4, vec3(f0.x, f0.y, f1.z)), dot(g5, vec3(f1.x, f0.y, f1.z)), dot(g6, vec3(f0.x, f1.y, f1.z)), dot(g7, vec3(f1.x, f1.y, f1.z))), f.z); return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x); } float noise(vec2 P) { return noise(vec3(P, 0.0)); } void main() { vec4 transformedPosition = modelMatrix * vec4(position, 1); fragPosition = transformedPosition.xyz; deltaTransform = 0.0; deltaTransform += noise(vec2( position.x / wave1Settings.z + time / wave1Settings.y, position.z / wave1Settings.z + time / wave1Settings.y )) / wave1Settings.x; deltaTransform += noise(vec2( position.x / wave2Settings.z + time / wave2Settings.y, position.z / wave2Settings.z + time / wave2Settings.y )) / wave2Settings.x; transformedPosition.y += deltaTransform; vec4 newPosition = projectionMatrix * viewMatrix * transformedPosition; gl_Position = newPosition; fragNormal = normalize(normal); }`; const fragmentShader = `#version 300 es precision mediump float; uniform vec3 centerPoint; uniform float validRadius; uniform vec3 backgroundColor; uniform vec3 baseColor; uniform vec3 highlightColor; in vec3 fragNormal; in vec3 fragPosition; in float deltaTransform; out vec4 outColor; void main() { float alpha = 1.0; alpha = distance(fragPosition, centerPoint) / validRadius; if((pow(fragPosition.x - centerPoint.x, 2.0) + pow(fragPosition.z - centerPoint.z, 2.0)) > pow(validRadius, 2.0)) { alpha = 0.0; } if(alpha <= 0.0) { outColor = vec4(backgroundColor, 1.0); } else { outColor = vec4(mix(mix(baseColor, highlightColor, deltaTransform), backgroundColor, alpha), 1.0); } }`; return [vertexShader, fragmentShader]; }4f:T90f,pirateShaders = { const vs = `#version 300 es in vec3 position; in vec3 normal; uniform mat4 modelMatrix; uniform mat4 viewMatrix; uniform mat4 projectionMatrix; uniform float time; uniform float deltaTime; out vec3 fragNormal; // The normal vector of the fragment - associated with the gl_position out vec3 fragPosition; void main() { //gl_PointSize = 2.0; vec4 transformedPosition = modelMatrix * vec4(position, 1); fragPosition = transformedPosition.xyz; vec4 newPosition = projectionMatrix * viewMatrix * transformedPosition; gl_Position = newPosition; mat4 normalMatrix = transpose(inverse(modelMatrix)); vec3 newNormal = (normalMatrix * vec4(normal, 0)).xyz; fragNormal = normalize(newNormal); }`; const fs = `#version 300 es precision mediump float; uniform vec3 centerPoint; uniform float validRadius; uniform vec3 moonlightPosition; uniform vec3 eyePosition; uniform vec3 materialColor; uniform float ambientLightPercent; uniform vec3 specularMatColor; uniform float shadingFactor; uniform float specularShine; in vec3 fragNormal; in vec3 fragPosition; out vec4 outColor; vec3 calculateLighting() { vec3 calcLightingVector = moonlightPosition - fragPosition; vec3 viewVector = normalize(eyePosition - fragPosition); vec3 halfVector = normalize(viewVector + calcLightingVector); vec3 colorDueToSpecularReflection = materialColor * pow(clamp(dot(fragNormal, halfVector), 0.0, 1.0), specularShine); float diffuseLightFactor = dot(normalize(calcLightingVector), normalize(fragNormal)); vec3 colorDueToDiffuseReflection = specularMatColor * clamp(diffuseLightFactor, 0.0, 1.0); vec3 colorDueToAmbientLightReflection = ambientLightPercent * specularMatColor; return colorDueToAmbientLightReflection + (1.0 - shadingFactor) * colorDueToDiffuseReflection + (shadingFactor) * colorDueToSpecularReflection; } void main() { float alpha = 1.0; outColor = vec4(calculateLighting(), 1.0); }` return [vs, fs] }50:T413,generateCameraMatrices = function(eyePosition, lookAt, fov) { /* ---- Calculating the camera position ---- */ // We know the camera's position. To generate the rest of the view matrix, however, we need to // specify what we're looking at as well as what is our relative "up" vector. const upVector = v3.create(0, 1, 0); // Our camera matrix is generated via the .lookAt function. However, that's not our viewMatrix const cameraMatrix = m4.lookAt(eyePosition, lookAt, upVector); // Invert the camera matrix to create our viewMatrix const viewMatrix = m4.inverse(cameraMatrix); // Now we need to build the projectionMatrix. const cameraFOVRad = degToRad(fov); const aspect = gl.canvas.width / gl.canvas.height; // Configure as necessary, but I'm not having any trouble with these values. const zNear = 1; const zFar = 1000; /* ---- Generating the projectionMatrix ---- */ const projectionMatrix = m4.perspective(cameraFOVRad, aspect, zNear, zFar) return {view: viewMatrix, projection: projectionMatrix} }51:T454,createShipMatrix = function(baseMatrix, time) { // Move the ship to the center of the ocean const oceanCenterMatrix = m4.translation(modelExtents.center); // Move the ship down in the water a little const pirateSinkMatrix = m4.translation([0, -1, 0]); // Scale the ship up. const pirateScalingMatrix = m4.scaling([3.0, 3.0, 3.0]); // Roll matrix const rollValue = Math.sin(time * shipRollControls.frequency) * shipRollControls.amplitude; const pirateRollMatrix = m4.rotationZ(rollValue); // Pitch matrix const pitchValue = Math.sin(time * shipPitchControls.frequency) * shipPitchControls.amplitude; const piratePitchMatrix = m4.rotationX(pitchValue); // Heave matrix const heaveValue = Math.sin(time * shipHeaveControls.frequency) * shipHeaveControls.amplitude; const pirateHeaveMatrix = m4.translation([0, heaveValue, 0]); // Ship Direction const shipHeadingMatrix = m4.rotationY(degToRad(shipDirection)); return multiplyMany([pirateScalingMatrix, piratePitchMatrix, pirateRollMatrix, shipHeadingMatrix, pirateSinkMatrix, pirateHeaveMatrix, oceanCenterMatrix]); }52:[{"id":"a0083c747b2f295e27bedbd50e0f07cf968898474f923fe30cada1667e1151270ffe48263dc69f0540dd2899f7e8092098f405b7404101b103ca8c235fc2d688","href":"https://static.observableusercontent.com/files/a0083c747b2f295e27bedbd50e0f07cf968898474f923fe30cada1667e1151270ffe48263dc69f0540dd2899f7e8092098f405b7404101b103ca8c235fc2d688","name":"pirate-ship@5.obj","type":"application/octet-stream","lastModified":1634094020926.554,"size":67198},{"id":"75b9ba9f67f01a84bc0face940a5124bb3a4a0101281f1808d9c459f27ad9620a876209207a767744fac2f1e4676b3c2e9ea10c962599e8c2d622ffe168d1d34","href":"https://static.observableusercontent.com/files/75b9ba9f67f01a84bc0face940a5124bb3a4a0101281f1808d9c459f27ad9620a876209207a767744fac2f1e4676b3c2e9ea10c962599e8c2d622ffe168d1d34","name":"pirate-ship.obj","type":"application/octet-stream","lastModified":1633358661887.048,"size":67194}] 48:{"id":"d8da57180f63daf9","slug":"pirate-ship-test","title":"Pirate Ship Test","thumbnail":"fd3437cfabc0b0df504e54045df1c7ef0c2f81021619d6b85a3841951dbc6a40","access_level":"public","create_time":"$D2021-10-03T19:30:34.407Z","update_time":"$D2021-11-15T22:12:50.002Z","view_time":null,"first_public_time":"$D2021-10-04T15:26:21.022Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9511a80685a5fb17","login":"thomasstoeckert","name":"Thomas Stoeckert","avatar_url":"https://avatars-next.observableusercontent.com/4f92170b2350488c3d8a89422bea05fb2613c00179ee30764dfe23a7fa526479","tier":"starter_2024","bio":"Computer Engineering student at UCF, class of UCF '22","followed_by_you":false,"follows_you":false},"version":1535,"publish_version":1535,"role":null,"authored":false,"authors":[{"type":"individual","id":"09c309828cae6769","login":"thomasstoeckert","name":"Thomas Stoeckert","avatar_url":"https://avatars-next.observableusercontent.com/4f92170b2350488c3d8a89422bea05fb2613c00179ee30764dfe23a7fa526479","tier":null,"bio":"Computer Engineering student at UCF, class of UCF '22","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"09c309828cae6769","login":"thomasstoeckert","name":"Thomas Stoeckert","avatar_url":"https://avatars-next.observableusercontent.com/4f92170b2350488c3d8a89422bea05fb2613c00179ee30764dfe23a7fa526479","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pirate Ship Test","cells":[{"id":0,"value":"# Pirate Ship Test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"md`To do:\n* Implement mouse controls\n* Texture lil ship\n* Cast Shadow on ocean\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"md`## Camera Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"viewof cameraAngles = columns({\n cameraY: Inputs.range([-179, 179], {label: \"Camera Y Angle\", step: 1.0, value: 11}),\n cameraX: Inputs.range([-89, 89], {label: \"Camera X Angle\", step: 1.0, value: -15})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`## Ship Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"viewof shipDirection = Inputs.range([0, 360], {label: \"Ship Heading\", value: 225, step: 1.0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"viewof shipRollControls = columns({\n frequency: Inputs.range([0.001, 10], {label: \"Roll Frequency\", transform: Math.log, value: 0.00178055655901976}), \n amplitude: Inputs.range([0.01, 10], {label: \"Roll Amplitude\", transform: Math.log, value: 0.0336413397967691})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"viewof shipPitchControls = columns({frequency: Inputs.range([0.001, 10], {label: \"Pitch Frequency\", transform: Math.log, value: 0.00164846068130121}), amplitude: Inputs.range([0.01, 10], {label: \"Pitch Amplitude\", transform: Math.log, value: 0.0158661213954266})})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"viewof shipHeaveControls = columns({\n frequency: Inputs.range([0.001, 10], {label: \"Heave Frequency\", transform: Math.log, value: 0.00192323765791353}), \n amplitude: Inputs.range([0.01, 10], {label: \"Heave Amplitude\", transform: Math.log, value: 0.226690595501052})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"canvas = DOM.canvas(width, 400);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"md`## Further Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"md`### Lighting Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"viewof lightingColors = columns({\n specularColor: colorInput({value: \"#4b3516\", description: \"Specular Color\"}),\n materialColor: colorInput({value: \"#1a9fb7\", description: \"Material Color\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"viewof generalLightSettings = columns({\n direction: Inputs.range([0, 180], {label: \"Directional Light Position\", value: 0}),\n shadingFactor: Inputs.range([0, 1.0], {label: \"Shading Factor\", value: 0.217})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"viewof materialProperties = columns({\n shine: Inputs.range([1, 100], {label: \"Shininess\", value: 13.41545}),\n ambientPercent: Inputs.range([0, 100], {label: \"Ambient Light %\", value: 11.70393})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"md`### Ocean Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"viewof planeOptions = columns({\n resolution: Inputs.range([1, 128], {label: \"Plane Resolution\", step: 1.0, value: 105}), \n size: Inputs.range([1, 128], {label: \"Plane Size\", step: 1.0, value: 60})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"viewof wave1Settings = columns({\n amplitude: Inputs.range([1, 100], {label: \"Amplitude\", value: 1, width: width / 6, transform: Math.log}), \n frequency: Inputs.range([10, 10000], {label: \"Frequency\", value: 1789.92188308693, width: width / 6, transform: Math.log}), \n noiseScaling: Inputs.range([0.01, 5.0], {label: \"Noise Scaling\", value: 5, width: width / 6, transform: Math.log})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"viewof wave2Settings = columns({\n amplitude: Inputs.range([1, 100], {label: \"Amplitude\", value: 3.68138908296319, width: width / 6, transform: Math.log}), \n frequency: Inputs.range([10, 10000], {label: \"Frequency\", value: 3441.21239715031, width: width / 6, transform: Math.log}), \n noiseScaling: Inputs.range([0.01, 5.0], {label: \"Noise Scaling\", value: 0.597110040205978, width: width / 6, transform: Math.log})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"viewof fragmentColors = columns({highlight: colorInput({value: \"#47fff9\", title: \"Highlight Color\"}), base: colorInput({value: \"#035c7c\", title: \"Base Color\"})})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"gl = {\n const gl = canvas.getContext(\"webgl2\");\n\n gl.clearColor(...backgroundColor, 1);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.enable(gl.DEPTH_TEST);\n gl.enable(gl.ALPHA_TEST);\n \n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`# Rendering Steps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`## 3D Model Loading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"pirateModelURL = await FileAttachment(\"pirate-ship@5.obj\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"pirateModelObject = loadModelFromURL(pirateModelURL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"modelObject = generatedPlaneObject//loadModelFromURL(modelURL, \"obj\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`## Model Calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"modelExtents = computeModelExtent(modelObject);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"pirateModelExtents = computeModelExtent(pirateModelObject)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"objectInfoArrays = createObjectInfoArrays(modelObject)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"pirateModelInfoArray = createObjectInfoArrays(pirateModelObject)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`## Shaders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"errorBlock = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"waterProgram = {\n errorBlock.style.height = \"20px\";\n errorBlock.innerHTML = \"Water Program Shader compilation successful\";\n\n return twgl.createProgramInfo(gl, waterShaders, (message) => {\n errorBlock.style.height = \"400px\";\n errorBlock.innerHTML = \"Water Program Shader compilation error\\n\" + message;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"pirateErrorBlock = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"pirateProgram = {\n pirateErrorBlock.style.height = \"20px\";\n pirateErrorBlock.innerHTML = \"Pirate Program Shader compilation successful\";\n\n return twgl.createProgramInfo(gl, pirateShaders, (message) => {\n pirateErrorBlock.style.height = \"400px\";\n pirateErrorBlock.innerHTML = \"Pirate Program Shader compilation error\\n\" + message;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`# Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"md`## Render Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"renderBlock = function(bufferArray, program, uniforms, clear) {\n // Clear our viewport, set the program\n if(clear) gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.useProgram(program.program);\n // Establish our uniforms\n twgl.setUniforms(program, uniforms);\n // Render\n bufferArray.forEach((bufferInfo) => {\n twgl.setBuffersAndAttributes(gl, program, bufferInfo);\n twgl.drawBufferInfo(gl, bufferInfo);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"md`## Math Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"degToRad = (x) => (Math.PI * x) / 180.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"multiplyMany = function (matrix_array) {\n let toReturn = m4.identity();\n for (const matrix of matrix_array) {\n toReturn = m4.multiply(matrix, toReturn);\n }\n return toReturn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"sphericalToCartesian = function(angleX, angleY, distance) {\n // Starting Point\n const startingPoint = v3.create(0, 0, 0);\n // Translation\n const translationMatrix = m4.translation([0, 0, distance]);\n \n // Rotate on X\n const rotationXMatrix = m4.rotationX(degToRad(angleX));\n // Rotate on Y\n const rotationYMatrix = m4.rotationY(degToRad(angleY));\n \n // Combine our rotation matices\n const transformationMatrix = multiplyMany([translationMatrix, rotationXMatrix, rotationYMatrix]);\n \n // Return our starting point transformed by the rotation values.\n return m4.transformPoint(transformationMatrix, startingPoint);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"createObjectInfoArrays = function(object) {\n const inputArrays = [];\n // For each sub-object...\n for (let objectIndex = 0; objectIndex < object.length; ++objectIndex) {\n // Organize the data into an object\n let objectData = {\n position: { numComponents: 3, data: object[objectIndex].sc.positions },\n normal: { numComponents: 3, data: object[objectIndex].sc.normals },\n };\n\n if(object[objectIndex].sc.indices != undefined) {\n objectData.indices = { numComponents: 3, data: object[objectIndex].sc.indices }\n }\n\n if(object[objectIndex].sc.uvs != undefined) {\n objectData.uvs = {numComponents: 2, data: object[objectIndex].sc.uvs}\n }\n\n // And create the buffer data for that\n let bufferData = twgl.createBufferInfoFromArrays(gl, objectData);\n inputArrays.push(bufferData);\n }\n\n return inputArrays;\n // Create the buffer info array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"md`## Entity-Specific Calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"calculateMoonPosition = function(xAngle, yAngle, distance) {\n // Apply transformations\n return sphericalToCartesian(xAngle, -yAngle, distance);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"backgroundColor = v3.create(0, 0, 0.1803921569);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"cameraDistance = 40.0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"cameraFOV = 40.0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"moonDistance = 50.0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"md`## Secondary Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"md`Values that rely on constants / user inputs, but don't involve much calculation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"cameraPosition = {\n const cameraPosition = sphericalToCartesian(cameraAngles.cameraX, cameraAngles.cameraY, cameraDistance);\n\n // Now that we have our properly rotated camera, we're going to go through and translate it by the\n // model's center (to re-center it)\n const cameraCenterTranslation = m4.translation(modelExtents.center);\n return m4.transformPoint(cameraCenterTranslation, cameraPosition);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"cameraMatrices = generateCameraMatrices(cameraPosition, modelExtents.center, cameraFOV)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"moonPosition = calculateMoonPosition(0.0, generalLightSettings.direction, moonDistance)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"planeClipRadius = planeOptions.size / 2.0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"oceanUniforms = {return {\n modelMatrix: m4.identity(),\n // Center of the ocean, ocean settings\n centerPoint: modelExtents.center,\n validRadius: planeClipRadius,\n backgroundColor: backgroundColor,\n baseColor: hex2rgb(fragmentColors.base),\n highlightColor: hex2rgb(fragmentColors.highlight),\n // Ocean noise settings\n wave1Settings: v3.create(wave1Settings.amplitude, wave1Settings.frequency, wave1Settings.noiseScaling),\n wave2Settings: v3.create(wave2Settings.amplitude, wave2Settings.frequency, wave2Settings.noiseScaling),\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"shipUniforms = {return {\n // Lighting settings / information\n eyePosition: cameraPosition,\n moonlightPosition: moonPosition,\n materialColor: hex2rgb(lightingColors.materialColor),\n ambientLightPercent: materialProperties.ambientPercent / 100.0,\n specularMatColor: hex2rgb(lightingColors.specularColor),\n shadingFactor: generalLightSettings.shadingFactor,\n specularShine: materialProperties.shine\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"twgl = require(\"twgl.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"m4 = twgl.m4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"v3 = twgl.v3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {hex2rgb} from \"@spattana/cap-4720-introduction-to-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {loadModelFromURL, computeModelExtent} from \"@spattana/model-loaders-using-threejs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { color as colorInput } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null