2d:null 2e:["$","title",null,{"children":"Ship in Regular Wave | Icaro Fonseca | Observable"}] 33:T9d7,{ //GUI setup (comment out to remove gui) let gui = new dat.GUI(); gui.domElement.id = 'gui'; let playback = new Playback({parentGUI: gui}); //Scene setup: let sun = new THREE.DirectionalLight(0xffffff, 2); sun.position.set(-512, 246, 128); scene.add(sun); //Ocean size let oSize = 2048; scene.add(new Skybox(oSize)); //Use Z up from now on: THREE.Object3D.DefaultUp.set(0, 0, 1); let zUpCont = new THREE.Group(); zUpCont.rotation.x = -0.5 * Math.PI; scene.add(zUpCont); //Camera setup camera.aspect = width / height; camera.updateProjectionMatrix(); camera.position.set(oSize * 0.05, -oSize * 0.3, oSize * 0.05); camera.lookAt(zUpCont.position); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxDistance = 0.5 * oSize; controls.enablePan = false; controls.maxPolarAngle = 0.5 * Math.PI - 0.1; controls.minPolarAngle = 0.1; controls.update(); zUpCont.add(new THREE.HemisphereLight(0xccccff, 0x666688, 1)); const ocean = new Ocean({ parentGUI: gui, sunDir: sun.position.clone().normalize(), size: oSize, segments: 127 }); playback.add(ocean); zUpCont.add(ocean); zUpCont.add(ship3D); playback.add(function(t) { //motion formula let omega = wavCre.waveDef.waveFreq; ship3D.heave = states.discrete.WaveMotion.state.heaveAmp * Math.cos(omega * t - ocean.waves["0"].phi * Math.PI / 180); // a 90 degrees phase difference of pitch in relation to the wave makes the motion appear more natural ship3D.pitch = states.discrete.WaveMotion.state.pitchAmp * Math.cos(omega * t + (- ocean.waves["0"].phi + 90) * Math.PI / 180); // pitch and roll may be negative depending on the direction of the waves in relation to the ship if ((wavCre.waveDef.heading > 90) && (wavCre.waveDef.heading < 270)) { ship3D.pitch = -ship3D.pitch; } ship3D.roll = states.discrete.WaveMotion.state.rollAmp * Math.cos(omega * t - ocean.waves["0"].phi * Math.PI / 180); if (wavCre.waveDef.heading < 180) { ship3D.roll = -ship3D.roll; } }); //Initial configuration: let w = ocean.addCosineWave({A: 5, T: 11, theta: 1}); if (w.conf) w.conf.close(); updateMotion(); playback.play(); while (true) { let playing = playback.update(); //Disable this to freeze water when not playing if (!playing) { ocean.water.material.uniforms.time.value += 1 / 60; } ocean.water.render(); renderer.render(scene, camera); yield renderer.domElement; } }34:T4c1b,Ship3D = {//@EliasHasle /* Draft for new version. More modularized, and interacts with a ship state. Uses an additional coordinate system for motions. The position.xy and rotation.z of the Ship3D object plae the ship in the 3D world. (Not geographically) position.z is the (negative) draft. fluctCont is a "fluctuations container" to be used for dynamically changing motions like heave, pitch, roll. cmContainer centers the motion on the center of gravity. normalizer nulls out the center of gravity height before the draft is applied. THREE.js Object3D constructed from Vessel.js Ship object. There are some serious limitations to this: 1. null values encountered are assumed to be either at the top or bottom of the given station. 2. The end caps and bulkheads are sometimes corrected with zeros where they should perhaps have been clipped because of null values. TODO: Use calculated draft for position.z, and place the ship model in a motion container centered at the calculated metacenter. */ //var hMat; //global for debugging function Ship3D(ship, {shipState, stlPath, deckOpacity = 0.2, objectOpacity = 0.5}) { THREE.Group.call(this); this.normalizer = new THREE.Group(); this.fluctCont = new THREE.Group(); this.fluctCont.rotation.order = "ZYX"; //right? this.cmContainer = new THREE.Group(); this.fluctCont.add(this.cmContainer); this.normalizer.add(this.fluctCont); this.add(this.normalizer); Object.defineProperty(this, "draft", { get: function() { return -this.position.z; }/*, set: function(value) { this.position.z = -value; }*/ }); Object.defineProperty(this, "surge", { get: function() { return this.fluctCont.position.x; }, set: function(value) { this.fluctCont.position.x = value; //this.shipState.motion.surge = value; } }); Object.defineProperty(this, "sway", { get: function() { return this.fluctCont.position.y; }, set: function(value) { this.fluctCont.position.y = value; //this.shipState.motion.sway = value; } }); Object.defineProperty(this, "heave", { get: function() { return this.fluctCont.position.z; }, set: function(value) { this.fluctCont.position.z = value; //this.shipState.motion.heave = value; } }); Object.defineProperty(this, "yaw", { get: function() { return this.fluctCont.rotation.z; }, set: function(value) { this.fluctCont.rotation.z = value; //this.shipState.motion.yaw = value; } }); Object.defineProperty(this, "pitch", { get: function() { return this.fluctCont.rotation.y; }, set: function(value) { this.fluctCont.rotation.y = value; //this.shipState.motion.pitch = value; } }); Object.defineProperty(this, "roll", { get: function() { return this.fluctCont.rotation.x; }, set: function(value) { this.fluctCont.rotation.x = value; //this.shipState.motion.roll = value; } }); this.objectOpacity = objectOpacity; this.ship = ship; this.shipState = shipState || ship.designState.clone(); let hull = ship.structure.hull; let LOA = hull.attributes.LOA; let BOA = hull.attributes.BOA; let Depth = hull.attributes.Depth; //console.log("LOA:%.1f, BOA:%.1f, Depth:%.1f",LOA,BOA,Depth); let {w: {cg, mass}, T, GMt, GMl} = ship.calculateStability(this.shipState); this.cmContainer.position.set(-cg.x, -cg.y, -cg.z); this.normalizer.position.z = cg.z; this.position.z = -T; let designDraft = ship.designState.calculationParameters.Draft_design; this.hull3D = new Hull3D(hull, designDraft); this.cmContainer.add(this.hull3D); //DEBUG, to show only hull: //return; let stations = hull.halfBreadths.stations; //Decks: var decks = new THREE.Group(); let deckMat = new THREE.MeshPhongMaterial({color: 0xcccccc/*this.randomColor()*/, transparent: true, opacity: deckOpacity, side: THREE.DoubleSide}); //deckGeom.translate(0,0,-0.5); let ds = ship.structure.decks; //let dk = Object.keys(ds); let stss = stations.map(st => LOA * st); //use scaled stations for now //console.log(dk); //for (let i = 0; i < dk.length; i++) { for (let dk in ds) { //let d = ds[dk[i]]; //deck in ship structure let d = ds[dk]; //Will eventually use BoxBufferGeometry, but that is harder, because vertices are duplicated in the face planes. let deckGeom = new THREE.PlaneBufferGeometry(1, 1, stss.length, 1);//new THREE.BoxBufferGeometry(1,1,1,sts.length,1,1); //console.log("d.zFloor=%.1f", d.zFloor); //DEBUG let zHigh = d.zFloor; let zLow = d.zFloor - d.thickness; let wlHigh = hull.getWaterline(zHigh); let wlLow = hull.getWaterline(zLow); let pos = deckGeom.getAttribute("position"); let pa = pos.array; for (let j = 0; j < stss.length + 1; j++) { let x = d.xAft + (j / stss.length) * (d.xFwd - d.xAft); let y1 = Vessel.f.linearFromArrays(stss, wlHigh, x); let y2 = Vessel.f.linearFromArrays(stss, wlLow, x); let y = Math.min(0.5 * d.breadth, y1, y2); pa[3 * j] = x; pa[3 * j + 1] = y; pa[3 * (stss.length + 1) + 3 * j] = x; pa[3 * (stss.length + 1) + 3 * j + 1] = -y; //test } pos.needsUpdate = true; //DEBUG //console.log("d.xFwd=%.1f, d.xAft=%.1f, 0.5*d.breadth=%.1f", d.xFwd, d.xAft, 0.5*d.breadth); //console.log(pa); let mat = deckMat; if (d.style) { mat = new THREE.MeshPhongMaterial({color: typeof d.style.color !== "undefined" ? d.style.color : 0xcccccc, transparent: true, opacity: typeof d.style.opacity !== "undefined" ? d.style.opacity : deckOpacity, side: THREE.DoubleSide}); } let deck = new THREE.Mesh(deckGeom, mat); deck.name = dk;//[i]; deck.position.z = d.zFloor; //deck.scale.set(d.xFwd-d.xAft, d.breadth, d.thickness); //deck.position.set(0.5*(d.xFwd+d.xAft), 0, d.zFloor); decks.add(deck); } this.decks = decks; this.cmContainer.add(decks); //Bulkheads: var bulkheads = new THREE.Group(); bulkheads.scale.set(1, 0.5 * BOA, Depth); //Should have individually trimmed geometries like the decks let bhGeom = new THREE.BoxBufferGeometry(1, 1, 1); bhGeom.translate(0, 0, 0.5); let bhMat = new THREE.MeshPhongMaterial({color: 0xcccccc/*this.randomColor()*/, transparent: true, opacity: deckOpacity, side: THREE.DoubleSide}); bhGeom.translate(0.5, 0, 0); let bhs = ship.structure.bulkheads; //let bhk = Object.keys(bhs); //for (let i = 0; i < bhk.length; i++) { for (let bhk in bhs) { let bh = bhs[bhk];//bhs[bhk[i]]; let mat = bhMat; if (bh.style) { mat = new THREE.MeshPhongMaterial({color: typeof bh.style.color !== "undefined" ? bh.style.color : 0xcccccc, transparent: true, opacity: typeof bh.style.opacity !== "undefined" ? bh.style.opacity : deckOpacity, side: THREE.DoubleSide}); } let bulkhead = new THREE.Mesh(bhGeom, mat); bulkhead.name = bhk;//[i]; bulkhead.scale.set(bh.thickness, 1, 1); bulkhead.position.set(bh.xAft, 0, 0); bulkheads.add(bulkhead); } this.bulkheads = bulkheads; this.cmContainer.add(bulkheads); //Objects this.materials = {}; this.stlPath = stlPath; let stlManager = new THREE.LoadingManager(); this.stlLoader = new THREE.STLLoader(stlManager); /*stlManager.onLoad = function() { createGUI(materials, deckMat); }*/ this.blocks = new THREE.Group(); this.cmContainer.add(this.blocks); //Default placeholder geometry this.boxGeom = new THREE.BoxBufferGeometry(1, 1, 1); this.boxGeom.translate(0, 0, 0.5); let objects = Object.values(ship.derivedObjects); for (let i = 0; i < objects.length; i++) { this.addObject(objects[i]); } //console.log("Reached end of Ship3D constructor."); } Ship3D.prototype = Object.create(THREE.Group.prototype); Object.assign(Ship3D.prototype, { constructor: Ship3D, addObject: function(object) { let mat; if (typeof object.style.color !== "undefined" || typeof object.style.opacity !== "undefined") { let color = typeof object.style.color !== "undefined" ? object.style.color : this.randomColor(); let opacity = typeof object.style.opacity !== "undefined" ? object.style.opacity : this.objectOpacity; mat = new THREE.MeshPhongMaterial({color, transparent: true, opacity}); } else { let name = this.stripName(object.id); if (this.materials[name] !== undefined) { mat = this.materials[name]; } else { mat = new THREE.MeshPhongMaterial({color: this.randomColor(), transparent: true, opacity: this.objectOpacity}); this.materials[name] = mat; } } let bo = object.baseObject; //Position let s = this.ship.designState.getObjectState(object); let x = s.xCentre; let y = s.yCentre; let z = s.zBase; //Scale let d = bo.boxDimensions; if (bo.file3D) { let self = this; this.stlLoader.load( this.stlPath + "/" + bo.file3D, function onLoad(geometry) { //Normalize: geometry.computeBoundingBox(); let b = geometry.boundingBox; geometry.translate(-b.min.x, -b.min.y, -b.min.z); geometry.scale(1 / (b.max.x - b.min.x), 1 / (b.max.y - b.min.y), 1 / (b.max.z - b.min.z)); //Align with the same coordinate system as placeholder blocks: geometry.translate(-0.5, -0.5, 0); let m = new THREE.Mesh(geometry, mat); m.position.set(x, y, z); m.scale.set(d.length, d.breadth, d.height); m.name = object.id; self.blocks.add(m); }, undefined, function onError() { console.warn("Error loading STL file " + bo.file3D + ". Falling back on placeholder."); let m = new THREE.Mesh(this.boxGeom, mat); m.position.set(x, y, z); m.scale.set(d.length, d.breadth, d.height); m.name = object.id; this.blocks.add(m); } ); } else { //Placeholder: let m = new THREE.Mesh(this.boxGeom, mat); m.position.set(x, y, z); m.scale.set(d.length, d.breadth, d.height); m.name = object.id; this.blocks.add(m); } }, //this function is used as a temporary hack to group similar objects by color stripName: function(s) { s = s.replace(/[0-9]/g, ""); s = s.trim(); return s; }, randomColor: function() { let r = Math.round(Math.random() * 0xff); let g = Math.round(Math.random() * 0xff); let b = Math.round(Math.random() * 0xff); return ((r << 16) | (g << 8) | b); } }); //Class to contain the geometry of a hull side. //(Should perhaps be replaced by a HullGeometry class, but then //it cannot be a simple subclass of PlaneBufferGeometry.) //After instantiation, stations, waterlines and table can be modified or replaced, //but the data dimensions NxM must remain the same. function HullSideGeometry(stations, waterlines, table) { this.stations = stations; this.waterlines = waterlines; this.table = table; this.N = stations.length; this.M = waterlines.length; //Hull side, in principle Y offsets on an XZ plane: //Even though a plane geometry is usually defined in terms of Z offsets on an XY plane, the order of the coordinates for each vertex is not so important. What is important is to get the topology right. This is ensured by working with the right order of the vertices. THREE.PlaneBufferGeometry.call(this, undefined, undefined, this.N - 1, this.M - 1); this.update(); } HullSideGeometry.prototype = Object.create(THREE.PlaneBufferGeometry.prototype); Object.assign(HullSideGeometry.prototype, { update: function() { let pos = this.getAttribute("position"); let pa = pos.array; const N = this.N; const M = this.M; //loop1: //zs let c = 0; //Iterate over waterlines for (let j = 0; j < M; j++) { //loop2: //xs //iterate over stations for (let i = 0; i < N; i++) { //if (table[j][i] === null) continue;// loop1; pa[c] = this.stations[i]; //x //DEBUG, OK. No attempts to read outside of table /*if(typeof table[j] === "undefined") console.error("table[%d] is undefined", j); else if (typeof table[j][i] === "undefined") console.error("table[%d][%d] is undefined", j, i);*/ //y pa[c + 1] = this.table[j][i]; //y pa[c + 2] = this.waterlines[j]; //z c += 3; } } //console.error("c-pa.length = %d", c-pa.length); //OK, sets all cells //Get rid of nulls by merging their points with the closest non-null point in the same station: /*I am joining some uvs too. Then an applied texture will be cropped, not distorted, where the hull is cropped.*/ let uv = this.getAttribute("uv"); let uva = uv.array; //Iterate over stations for (let i = 0; i < N; i++) { let firstNumberJ; let lastNumberJ; //Iterate over waterlines let j; for (j = 0; j < M; j++) { let y = this.table[j][i]; //If this condition is satisfied (number found), //the loop will be quitted //after the extra logic below: if (y !== null) { firstNumberJ = j; lastNumberJ = j; //copy vector for i,j to positions for all null cells below: let c = firstNumberJ * N + i; let x = pa[3 * c]; let y = pa[3 * c + 1]; let z = pa[3 * c + 2]; let d = c; while (firstNumberJ > 0) { firstNumberJ--; d -= N; pa[3 * d] = x; pa[3 * d + 1] = y; pa[3 * d + 2] = z; uva[2 * d] = uva[2 * c]; uva[2 * d + 1] = uva[2 * c + 1]; } break; } //console.log("null encountered."); } //Continue up the hull (with same j counter), searching for upper number. This does not account for the existence of numbers above the first null encountered. for (; j < M; j++) { let y = this.table[j][i]; if (y === null) { //console.log("null encountered."); break; } //else not null: lastNumberJ = j; } //copy vector for i,j to positions for all null cells above: let c = lastNumberJ * N + i; let x = pa[3 * c]; let y = pa[3 * c + 1]; let z = pa[3 * c + 2]; let d = c; while (lastNumberJ < M - 1) { lastNumberJ++; d += N; pa[3 * d] = x; pa[3 * d + 1] = y; pa[3 * d + 2] = z; uva[2 * d] = uva[2 * c]; uva[2 * d + 1] = uva[2 * c + 1]; } ////////// } //console.log(pa); pos.needsUpdate = true; uv.needsUpdate = true; this.computeVertexNormals(); } }); function Hull3D(hull, design_draft) { THREE.Group.call(this); this.hull = hull; this.design_draft = design_draft !== undefined ? design_draft : 0.5 * hull.attributes.Depth; this.upperColor = typeof hull.style.upperColor !== "undefined" ? hull.style.upperColor : 0x33aa33; this.lowerColor = typeof hull.style.lowerColor !== "undefined" ? hull.style.lowerColor : 0xaa3333; this.opacity = typeof hull.style.opacity !== "undefined" ? hull.style.opacity : 0.5; this.update(); } Hull3D.prototype = Object.create(THREE.Group.prototype); Object.assign(Hull3D.prototype, { //Experimental addition. Broken. addStation: function(p) { const hb = this.hull.halfBreadths; const {index, mu} = Vessel.f.bisectionSearch(hb.stations, p); hb.stations.splice(index, 0, p); for (let i = 0; i < hb.waterlines.length; i++) { hb.table[i].splice(index, 0, 0); } this.update(); }, //Experimental addition addWaterline: function(p) { const hb = this.hull.halfBreadths; const {index, mu} = Vessel.f.bisectionSearch(hb.waterlines, p); hb.waterlines.splice(index, 0, p); hb.table.splice(index, 0, new Array(hb.stations.length).fill(0)); this.update(); }, //or updateGeometries? update: function() { const hull = this.hull; const upperColor = this.upperColor; const lowerColor = this.lowerColor; const design_draft = this.design_draft; const opacity = this.opacity; let LOA = hull.attributes.LOA; let BOA = hull.attributes.BOA; let Depth = hull.attributes.Depth; //None of these are changed during correction of the geometry. let stations = hull.halfBreadths.stations; let waterlines = hull.halfBreadths.waterlines; let table = hull.halfBreadths.table; if (this.hGeom) this.hGeom.dispose(); this.hGeom = new HullSideGeometry(stations, waterlines, table); let N = stations.length; let M = waterlines.length; //Bow cap: let bowPlaneOffsets = hull.getStation(LOA).map(str => str / (0.5 * BOA)); //normalized if (this.bowCapG) this.bowCapG.dispose(); this.bowCapG = new THREE.PlaneBufferGeometry(undefined, undefined, 1, M - 1); let pos = this.bowCapG.getAttribute("position"); let pa = pos.array; //constant x-offset yz plane for (let j = 0; j < M; j++) { pa[3 * (2 * j)] = 1; pa[3 * (2 * j) + 1] = bowPlaneOffsets[j]; pa[3 * (2 * j) + 2] = waterlines[j]; pa[3 * (2 * j + 1)] = 1; pa[3 * (2 * j + 1) + 1] = -bowPlaneOffsets[j]; pa[3 * (2 * j + 1) + 2] = waterlines[j]; } pos.needsUpdate = true; //Aft cap: let aftPlaneOffsets = hull.getStation(0).map(str => str / (0.5 * BOA)); //normalized if (this.aftCapG) this.aftCapG.dispose(); this.aftCapG = new THREE.PlaneBufferGeometry(undefined, undefined, 1, M - 1); pos = this.aftCapG.getAttribute("position"); pa = pos.array; //constant x-offset yz plane for (let j = 0; j < M; j++) { pa[3 * (2 * j)] = 0; pa[3 * (2 * j) + 1] = -aftPlaneOffsets[j]; pa[3 * (2 * j) + 2] = waterlines[j]; pa[3 * (2 * j + 1)] = 0; pa[3 * (2 * j + 1) + 1] = aftPlaneOffsets[j]; pa[3 * (2 * j + 1) + 2] = waterlines[j]; } pos.needsUpdate = true; //Bottom cap: let bottomPlaneOffsets = hull.getWaterline(0).map(hw => hw / (0.5 * BOA)); //normalized if (this.bottomCapG) this.bottomCapG.dispose(); this.bottomCapG = new THREE.PlaneBufferGeometry(undefined, undefined, N - 1, 1); pos = this.bottomCapG.getAttribute("position"); pa = pos.array; //constant z-offset xy plane for (let i = 0; i < N; i++) { pa[3 * (i)] = stations[i]; pa[3 * (i) + 1] = -bottomPlaneOffsets[i]; pa[3 * (i) + 2] = 0; pa[3 * (N + i)] = stations[i]; pa[3 * (N + i) + 1] = bottomPlaneOffsets[i]; pa[3 * (N + i) + 2] = 0; } pos.needsUpdate = true; //Hull material if (!this.hMat) { let phong = THREE.ShaderLib.phong; let commonDecl = "uniform float wlThreshold;uniform vec3 aboveWL; uniform vec3 belowWL;\nvarying float vZ;"; this.hMat = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.merge([phong.uniforms, { wlThreshold: new THREE.Uniform(0.5), aboveWL: new THREE.Uniform(new THREE.Color()), belowWL: new THREE.Uniform(new THREE.Color()) }]), vertexShader: commonDecl + phong.vertexShader.replace("main() {", "main() {\nvZ = position.z;").replace("#define PHONG", ""), fragmentShader: commonDecl + phong.fragmentShader.replace("vec4 diffuseColor = vec4( diffuse, opacity );", "vec4 diffuseColor = vec4( (vZ>wlThreshold)? aboveWL.rgb : belowWL.rgb, opacity );").replace("#define PHONG", ""), side: THREE.DoubleSide, lights: true, transparent: true }); } this.hMat.uniforms.wlThreshold.value = this.design_draft / Depth; this.hMat.uniforms.aboveWL.value = new THREE.Color(upperColor); this.hMat.uniforms.belowWL.value = new THREE.Color(lowerColor); this.hMat.uniforms.opacity.value = opacity; if (this.port) this.remove(this.port); this.port = new THREE.Mesh(this.hGeom, this.hMat); if (this.starboard) this.remove(this.starboard); this.starboard = new THREE.Mesh(this.hGeom, this.hMat); this.starboard.scale.y = -1; this.add(this.port, this.starboard); //Caps: if (this.bowCap) this.remove(this.bowCap); this.bowCap = new THREE.Mesh(this.bowCapG, this.hMat) if (this.aftCap) this.remove(this.aftCap); this.aftCap = new THREE.Mesh(this.aftCapG, this.hMat) if (this.bottomCap) this.remove(this.bottomCap); this.bottomCap = new THREE.Mesh(this.bottomCapG, this.hMat) this.add(this.bowCap, this.aftCap, this.bottomCap); this.scale.set(LOA, 0.5 * BOA, Depth); } }); return Ship3D; }35:T761,Playback = {//@EliasHasle /*Dependends on dat.gui for gui (optional).*/ /*Even though this is called "Playback", the update functions are not restricted to deterministic sequences. This can be used for conducting a simulation too, but does not take care of interactions (that will have to be done within the update functions.)*/ function Playback(params = {}) { if (params.parentGUI) { this.conf = params.parentGUI.addFolder("Playback") this.conf.open(); this.conf.add(this, "playOrPause").name("Play/Pause"); this.conf.add(this, "stop"); } this.playables = []; } Object.assign(Playback.prototype, { playing: false, paused: false, //Playables should be added in the intended updating order add: function(playable) { this.playables.push(playable); }, /*remove: function(playable) { this.playables.remove(playable); },*/ playOrPause: function() { if (!this.playing) { this.play(); } else { //pause this.playing = false; this.paused = true; this.tPaused = 0.001 * performance.now(); } }, //This is kept as an alias: play: function() { let pn = 0.001 * performance.now(); if (!this.paused) { //Play from start this.tStart = pn; this.tLast = this.tStart; this.playing = true; } else { //Resume let skip = pn - this.tPaused; this.tStart += skip; this.tLast += skip; this.paused = false; this.playing = true; } }, stop: function() { this.playing = false; this.paused = false; }, update: function() { if (!this.playing) return false; let pn = 0.001 * performance.now(); let dt = pn - this.tLast; this.tLast = pn; let t = pn - this.tStart; for (let i = 0; i < this.playables.length; i++) { if (typeof this.playables[i].update !== "undefined") this.playables[i].update(t, dt); else this.playables[i](t, dt); //assume function } return true; } }); return Playback; }36:T59a,Skybox = { function Skybox(size) { // load skybox (reusing example code to test the water shading fast) var cubeMap = new THREE.CubeTexture( [] ); cubeMap.format = THREE.RGBFormat; var loader = new THREE.ImageLoader(); loader.load( 'https://shiplab.github.io/vesseljs/examples/3D_engine/textures/skyboxsun25degtest1.png', function ( image ) { var getSide = function ( x, y ) { var size = 1024; var canvas = document.createElement( 'canvas' ); canvas.width = size; canvas.height = size; var context = canvas.getContext( '2d' ); context.drawImage( image, - x * size, - y * size ); return canvas; }; cubeMap.images[ 0 ] = getSide( 2, 1 ); // px cubeMap.images[ 1 ] = getSide( 0, 1 ); // nx cubeMap.images[ 2 ] = getSide( 1, 0 ); // py cubeMap.images[ 3 ] = getSide( 1, 2 ); // ny cubeMap.images[ 4 ] = getSide( 1, 1 ); // pz cubeMap.images[ 5 ] = getSide( 3, 1 ); // nz cubeMap.needsUpdate = true; } ); var cubeShader = THREE.ShaderLib[ 'cube' ]; cubeShader.uniforms[ 'tCube' ].value = cubeMap; var skyBoxMaterial = new THREE.ShaderMaterial( { fragmentShader: cubeShader.fragmentShader, vertexShader: cubeShader.vertexShader, uniforms: cubeShader.uniforms, depthWrite: false, side: THREE.BackSide } ); THREE.Mesh.call(this, new THREE.BoxBufferGeometry( size, size, size ), skyBoxMaterial ); } Skybox.prototype = Object.create(THREE.Mesh.prototype); return Skybox; }37:T4df8,{ /** * @author Slayvin / http://slayvin.net */ THREE.ShaderLib[ 'mirror' ] = { uniforms: { "mirrorColor": { value: new THREE.Color( 0x7F7F7F ) }, "mirrorSampler": { value: null }, "textureMatrix" : { value: new THREE.Matrix4() } }, vertexShader: [ "uniform mat4 textureMatrix;", "varying vec4 mirrorCoord;", "void main() {", "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );", "vec4 worldPosition = modelMatrix * vec4( position, 1.0 );", "mirrorCoord = textureMatrix * worldPosition;", "gl_Position = projectionMatrix * mvPosition;", "}" ].join( "\n" ), fragmentShader: [ "uniform vec3 mirrorColor;", "uniform sampler2D mirrorSampler;", "varying vec4 mirrorCoord;", "float blendOverlay(float base, float blend) {", "return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );", "}", "void main() {", "vec4 color = texture2DProj(mirrorSampler, mirrorCoord);", "color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);", "gl_FragColor = color;", "}" ].join( "\n" ) }; THREE.Mirror = function ( renderer, camera, options ) { THREE.Object3D.call( this ); this.name = 'mirror_' + this.id; options = options || {}; this.matrixNeedsUpdate = true; var width = options.textureWidth !== undefined ? options.textureWidth : 512; var height = options.textureHeight !== undefined ? options.textureHeight : 512; this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0; var mirrorColor = options.color !== undefined ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F ); this.renderer = renderer; this.mirrorPlane = new THREE.Plane(); this.normal = new THREE.Vector3( 0, 0, 1 ); this.mirrorWorldPosition = new THREE.Vector3(); this.cameraWorldPosition = new THREE.Vector3(); this.rotationMatrix = new THREE.Matrix4(); this.lookAtPosition = new THREE.Vector3( 0, 0, - 1 ); this.clipPlane = new THREE.Vector4(); // For debug only, show the normal and plane of the mirror var debugMode = options.debugMode !== undefined ? options.debugMode : false; if ( debugMode ) { var arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, 0 ), 10, 0xffff80 ); var planeGeometry = new THREE.Geometry(); planeGeometry.vertices.push( new THREE.Vector3( - 10, - 10, 0 ) ); planeGeometry.vertices.push( new THREE.Vector3( 10, - 10, 0 ) ); planeGeometry.vertices.push( new THREE.Vector3( 10, 10, 0 ) ); planeGeometry.vertices.push( new THREE.Vector3( - 10, 10, 0 ) ); planeGeometry.vertices.push( planeGeometry.vertices[ 0 ] ); var plane = new THREE.Line( planeGeometry, new THREE.LineBasicMaterial( { color: 0xffff80 } ) ); this.add( arrow ); this.add( plane ); } if ( camera instanceof THREE.PerspectiveCamera ) { this.camera = camera; } else { this.camera = new THREE.PerspectiveCamera(); console.log( this.name + ': camera is not a Perspective Camera!' ); } this.textureMatrix = new THREE.Matrix4(); this.mirrorCamera = this.camera.clone(); this.mirrorCamera.matrixAutoUpdate = true; var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false }; this.renderTarget = new THREE.WebGLRenderTarget( width, height, parameters ); this.renderTarget2 = new THREE.WebGLRenderTarget( width, height, parameters ); var mirrorShader = THREE.ShaderLib[ "mirror" ]; var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms ); this.material = new THREE.ShaderMaterial( { fragmentShader: mirrorShader.fragmentShader, vertexShader: mirrorShader.vertexShader, uniforms: mirrorUniforms } ); this.material.uniforms.mirrorSampler.value = this.renderTarget.texture; this.material.uniforms.mirrorColor.value = mirrorColor; this.material.uniforms.textureMatrix.value = this.textureMatrix; if ( ! THREE.Math.isPowerOfTwo( width ) || ! THREE.Math.isPowerOfTwo( height ) ) { this.renderTarget.texture.generateMipmaps = false; this.renderTarget2.texture.generateMipmaps = false; } this.updateTextureMatrix(); this.render(); }; THREE.Mirror.prototype = Object.create( THREE.Object3D.prototype ); THREE.Mirror.prototype.constructor = THREE.Mirror; THREE.Mirror.prototype.renderWithMirror = function ( otherMirror ) { // update the mirror matrix to mirror the current view this.updateTextureMatrix(); this.matrixNeedsUpdate = false; // set the camera of the other mirror so the mirrored view is the reference view var tempCamera = otherMirror.camera; otherMirror.camera = this.mirrorCamera; // render the other mirror in temp texture otherMirror.renderTemp(); otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture; // render the current mirror this.render(); this.matrixNeedsUpdate = true; // restore material and camera of other mirror otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture; otherMirror.camera = tempCamera; // restore texture matrix of other mirror otherMirror.updateTextureMatrix(); }; THREE.Mirror.prototype.updateTextureMatrix = function () { this.updateMatrixWorld(); this.camera.updateMatrixWorld(); this.mirrorWorldPosition.setFromMatrixPosition( this.matrixWorld ); this.cameraWorldPosition.setFromMatrixPosition( this.camera.matrixWorld ); this.rotationMatrix.extractRotation( this.matrixWorld ); this.normal.set( 0, 0, 1 ); this.normal.applyMatrix4( this.rotationMatrix ); var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition ); view.reflect( this.normal ).negate(); view.add( this.mirrorWorldPosition ); this.rotationMatrix.extractRotation( this.camera.matrixWorld ); this.lookAtPosition.set( 0, 0, - 1 ); this.lookAtPosition.applyMatrix4( this.rotationMatrix ); this.lookAtPosition.add( this.cameraWorldPosition ); var target = this.mirrorWorldPosition.clone().sub( this.lookAtPosition ); target.reflect( this.normal ).negate(); target.add( this.mirrorWorldPosition ); this.up.set( 0, - 1, 0 ); this.up.applyMatrix4( this.rotationMatrix ); this.up.reflect( this.normal ).negate(); this.mirrorCamera.position.copy( view ); this.mirrorCamera.up = this.up; this.mirrorCamera.lookAt( target ); this.mirrorCamera.updateProjectionMatrix(); this.mirrorCamera.updateMatrixWorld(); this.mirrorCamera.matrixWorldInverse.getInverse( this.mirrorCamera.matrixWorld ); // Update the texture matrix this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 ); this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix ); this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse ); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf this.mirrorPlane.setFromNormalAndCoplanarPoint( this.normal, this.mirrorWorldPosition ); this.mirrorPlane.applyMatrix4( this.mirrorCamera.matrixWorldInverse ); this.clipPlane.set( this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant ); var q = new THREE.Vector4(); var projectionMatrix = this.mirrorCamera.projectionMatrix; q.x = ( Math.sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ]; q.y = ( Math.sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ]; q.z = - 1.0; q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ]; // Calculate the scaled plane vector var c = new THREE.Vector4(); c = this.clipPlane.multiplyScalar( 2.0 / this.clipPlane.dot( q ) ); // Replacing the third row of the projection matrix projectionMatrix.elements[ 2 ] = c.x; projectionMatrix.elements[ 6 ] = c.y; projectionMatrix.elements[ 10 ] = c.z + 1.0 - this.clipBias; projectionMatrix.elements[ 14 ] = c.w; }; THREE.Mirror.prototype.render = function () { if ( this.matrixNeedsUpdate ) this.updateTextureMatrix(); this.matrixNeedsUpdate = true; // Render the mirrored view of the current scene into the target texture var scene = this; while ( scene.parent !== null ) { scene = scene.parent; } if ( scene !== undefined && scene instanceof THREE.Scene ) { // We can't render ourself to ourself var visible = this.material.visible; this.material.visible = false; this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true ); this.material.visible = visible; } }; THREE.Mirror.prototype.renderTemp = function () { if ( this.matrixNeedsUpdate ) this.updateTextureMatrix(); this.matrixNeedsUpdate = true; // Render the mirrored view of the current scene into the target texture var scene = this; while ( scene.parent !== null ) { scene = scene.parent; } if ( scene !== undefined && scene instanceof THREE.Scene ) { this.renderer.render( scene, this.mirrorCamera, this.renderTarget2, true ); } }; /** * @author jbouny / https://github.com/jbouny * * Work based on : * @author Slayvin / http://slayvin.net : Flat mirror for three.js * @author Stemkoski / http://www.adelphi.edu/~stemkoski : An implementation of water shader based on the flat mirror * @author Jonas Wagner / http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL */ THREE.ShaderLib['water'] = { uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib["fog"], { "normalSampler": { value: null }, "mirrorSampler": { value: null }, "alpha": { value: 1.0 }, "time": { value: 0.0 }, "distortionScale": { value: 20.0 }, "noiseScale": { value: 1.0 }, "textureMatrix": { value: new THREE.Matrix4() }, "sunColor": { value: new THREE.Color(0x7F7F7F) }, "sunDirection": { value: new THREE.Vector3(0.70707, 0.70707, 0) }, "eye": { value: new THREE.Vector3() }, "waterColor": { value: new THREE.Color(0x555555) } } ]), vertexShader: [ 'uniform mat4 textureMatrix;', 'uniform float time;', 'varying vec4 mirrorCoord;', 'varying vec3 worldPosition;', THREE.ShaderChunk["fog_pars_vertex"], 'void main()', '{', ' mirrorCoord = modelMatrix * vec4( position, 1.0 );', ' worldPosition = mirrorCoord.xyz;', ' mirrorCoord = textureMatrix * mirrorCoord;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', THREE.ShaderChunk["fog_vertex"], '}' ].join('\n'), fragmentShader: [ 'precision highp float;', 'uniform sampler2D mirrorSampler;', 'uniform float alpha;', 'uniform float time;', 'uniform float distortionScale;', 'uniform sampler2D normalSampler;', 'uniform vec3 sunColor;', 'uniform vec3 sunDirection;', 'uniform vec3 eye;', 'uniform vec3 waterColor;', 'varying vec4 mirrorCoord;', 'varying vec3 worldPosition;', 'vec4 getNoise( vec2 uv )', '{', ' vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);', ' vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );', ' vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );', ' vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );', ' vec4 noise = texture2D( normalSampler, uv0 ) +', ' texture2D( normalSampler, uv1 ) +', ' texture2D( normalSampler, uv2 ) +', ' texture2D( normalSampler, uv3 );', ' return noise * 0.5 - 1.0;', '}', 'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor )', '{', ' vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );', ' float direction = max( 0.0, dot( eyeDirection, reflection ) );', ' specularColor += pow( direction, shiny ) * sunColor * spec;', ' diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;', '}', THREE.ShaderChunk["common"], THREE.ShaderChunk["fog_pars_fragment"], 'void main()', '{', ' vec4 noise = getNoise( worldPosition.xz );', ' vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );', ' vec3 diffuseLight = vec3(0.0);', ' vec3 specularLight = vec3(0.0);', ' vec3 worldToEye = eye-worldPosition;', ' vec3 eyeDirection = normalize( worldToEye );', ' sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );', ' float distance = length(worldToEye);', ' vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;', ' vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.z + distortion ) );', ' float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );', ' float rf0 = 0.3;', ' float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );', ' vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;', ' vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance );', ' vec3 outgoingLight = albedo;', THREE.ShaderChunk["fog_fragment"], ' gl_FragColor = vec4( outgoingLight, alpha );', '}' ].join('\n') }; THREE.Water = function (renderer, camera, scene, options) { THREE.Object3D.call(this); this.name = 'water_' + this.id; function optionalParameter(value, defaultValue) { return value !== undefined ? value : defaultValue; } options = options || {}; this.matrixNeedsUpdate = true; var width = optionalParameter(options.textureWidth, 512); var height = optionalParameter(options.textureHeight, 512); this.clipBias = optionalParameter(options.clipBias, 0.0); this.alpha = optionalParameter(options.alpha, 1.0); this.time = optionalParameter(options.time, 0.0); this.normalSampler = optionalParameter(options.waterNormals, null); this.sunDirection = optionalParameter(options.sunDirection, new THREE.Vector3(0.70707, 0.70707, 0.0)); this.sunColor = new THREE.Color(optionalParameter(options.sunColor, 0xffffff)); this.waterColor = new THREE.Color(optionalParameter(options.waterColor, 0x7F7F7F)); this.eye = optionalParameter(options.eye, new THREE.Vector3(0, 0, 0)); this.distortionScale = optionalParameter(options.distortionScale, 20.0); this.side = optionalParameter(options.side, THREE.FrontSide); this.fog = optionalParameter(options.fog, false); this.renderer = renderer; this.scene = scene; this.mirrorPlane = new THREE.Plane(); this.normal = new THREE.Vector3(0, 0, 1); this.mirrorWorldPosition = new THREE.Vector3(); this.cameraWorldPosition = new THREE.Vector3(); this.rotationMatrix = new THREE.Matrix4(); this.lookAtPosition = new THREE.Vector3(0, 0, -1); this.clipPlane = new THREE.Vector4(); if (camera instanceof THREE.PerspectiveCamera) { this.camera = camera; } else { this.camera = new THREE.PerspectiveCamera(); console.log(this.name + ': camera is not a Perspective Camera!'); } this.textureMatrix = new THREE.Matrix4(); this.mirrorCamera = this.camera.clone(); this.renderTarget = new THREE.WebGLRenderTarget(width, height); this.renderTarget2 = new THREE.WebGLRenderTarget(width, height); var mirrorShader = THREE.ShaderLib["water"]; var mirrorUniforms = THREE.UniformsUtils.clone(mirrorShader.uniforms); this.material = new THREE.ShaderMaterial({ fragmentShader: mirrorShader.fragmentShader, vertexShader: mirrorShader.vertexShader, uniforms: mirrorUniforms, transparent: true, side: THREE.DoubleSide, // comment this line to display only top side of the sea opacity: 0.6, fog: this.fog }); this.material.uniforms.mirrorSampler.value = this.renderTarget.texture; this.material.uniforms.textureMatrix.value = this.textureMatrix; this.material.uniforms.alpha.value = this.alpha; this.material.uniforms.time.value = this.time; this.material.uniforms.normalSampler.value = this.normalSampler; this.material.uniforms.sunColor.value = this.sunColor; this.material.uniforms.waterColor.value = this.waterColor; this.material.uniforms.sunDirection.value = this.sunDirection; this.material.uniforms.distortionScale.value = this.distortionScale; this.material.uniforms.eye.value = this.eye; if (!THREE.Math.isPowerOfTwo(width) || !THREE.Math.isPowerOfTwo(height)) { this.renderTarget.texture.generateMipmaps = false; this.renderTarget.texture.minFilter = THREE.LinearFilter; this.renderTarget2.texture.generateMipmaps = false; this.renderTarget2.texture.minFilter = THREE.LinearFilter; } this.updateTextureMatrix(); this.render(); }; THREE.Water.prototype = Object.create(THREE.Mirror.prototype); THREE.Water.prototype.constructor = THREE.Water; THREE.Water.prototype.updateTextureMatrix = function () { function sign(x) { return x ? x < 0 ? -1 : 1 : 0; } this.updateMatrixWorld(); this.camera.updateMatrixWorld(); this.mirrorWorldPosition.setFromMatrixPosition(this.matrixWorld); this.cameraWorldPosition.setFromMatrixPosition(this.camera.matrixWorld); this.rotationMatrix.extractRotation(this.matrixWorld); this.normal.set(0, 0, 1); this.normal.applyMatrix4(this.rotationMatrix); var view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition); view.reflect(this.normal).negate(); view.add(this.mirrorWorldPosition); this.rotationMatrix.extractRotation(this.camera.matrixWorld); this.lookAtPosition.set(0, 0, -1); this.lookAtPosition.applyMatrix4(this.rotationMatrix); this.lookAtPosition.add(this.cameraWorldPosition); var target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition); target.reflect(this.normal).negate(); target.add(this.mirrorWorldPosition); this.up.set(0, -1, 0); this.up.applyMatrix4(this.rotationMatrix); this.up.reflect(this.normal).negate(); this.mirrorCamera.position.copy(view); this.mirrorCamera.up = this.up; this.mirrorCamera.lookAt(target); this.mirrorCamera.aspect = this.camera.aspect; this.mirrorCamera.updateProjectionMatrix(); this.mirrorCamera.updateMatrixWorld(); this.mirrorCamera.matrixWorldInverse.getInverse(this.mirrorCamera.matrixWorld); // Update the texture matrix this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0); this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix); this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition); this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse); this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant); var q = new THREE.Vector4(); var projectionMatrix = this.mirrorCamera.projectionMatrix; q.x = (sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0]; q.y = (sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5]; q.z = -1.0; q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector var c = new THREE.Vector4(); c = this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q)); // Replacing the third row of the projection matrix projectionMatrix.elements[2] = c.x; projectionMatrix.elements[6] = c.y; projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias; projectionMatrix.elements[14] = c.w; var worldCoordinates = new THREE.Vector3(); worldCoordinates.setFromMatrixPosition(this.camera.matrixWorld); this.eye = worldCoordinates; this.material.uniforms.eye.value = this.eye; }; }38:T1b3a,Ocean = { //@EliasHasle /*Dependencies: THREE, Mirror, WaterShader, dat.gui (for gui only), browse_files_Elias_Hasle, Patch_interpolation, WaveCreator */ /*This is similar to the file Configurable_ocean.js, but simplified to a single regular wave */ var Wave = (function() { var waveCount = 0; return function(waveType) { this.waveId = waveCount; waveCount++; this.waveType = waveType; }; })(); //A, T, theta, phi function DirectionalCosine(params) { params = params || {}; let oceanconf = params.parentGUI; Wave.call(this, "Cosine"); //amplitude if (typeof params.A !== "undefined") this.A = params.A; //period let T; Object.defineProperty(this, "T", { get: function() { return T; }, set: function(newvalue) { T = newvalue; this.omega = (2 * Math.PI) / T; this.updateWavelength(); } }); this.T = typeof params.T !== "undefined" ? params.T : 5; //direction let theta; Object.defineProperty(this, "theta", { get: function() { return theta; }, set: function(newvalue) { theta = newvalue; this.costh = Math.cos((theta * Math.PI) / 180); this.sinth = Math.sin((theta * Math.PI) / 180); } }); this.theta = typeof params.theta !== "undefined" ? params.theta : 0; //phase shift this.phi = typeof params.phi !== "undefined" ? params.phi : 0; this.updateWavelength(); } Object.assign(DirectionalCosine.prototype, { constructor: DirectionalCosine, //Defaults A: 2.0, T: 5.0, L: 50.0, theta: 0.0, phi: 0.0, //Updates the wave length to the "natural" state (dispersion relation for deep waters) updateWavelength: function() { let g = 9.81; this.L = (g * this.T * this.T) / (2 * Math.PI); if (this.conf) this.conf.updateDisplay(); //TEST }, calculate: function(x, y, t) { let xm = x * this.costh + y * this.sinth; return ( this.A * Math.cos( (this.phi * Math.PI) / 180 + 2 * Math.PI * (xm / this.L) - this.omega * t ) ); } }); //parentGUI, size, segments, sunDirection function Ocean(params) { params = params || {}; this.size = params.size || 2048; this.segments = params.segments || 127; /* The WaterShader is from the THREE examples. The mirror effect does not account for geometry, and there is no self-mirroring. But it mostly looks OK anyway. On tall waves, one can see that the rendered texture is stretched. */ try { let waterNormals = new THREE.TextureLoader().load( 'https://shiplab.github.io/vesseljs/examples/3D_engine/textures/waternormals.jpg' ); waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; this.water = new THREE.Water(renderer, camera, scene, { textureWidth: 512, textureHeight: 512, waterNormals: waterNormals, alpha: 1.0, sunDirection: params.sunDirection, sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 50.0 }); THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( this.size, this.size, this.segments, this.segments ), /*new THREE.MeshPhongMaterial({ color: 0x041020, side: THREE.DoubleSide, wireframe: true })*/ this .water.material ); this.add(this.water); } catch (e) { THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( this.size, this.size, this.segments, this.segments ), new THREE.MeshPhongMaterial({ color: 0x041020, side: THREE.DoubleSide, wireframe: true }) ); //Dummy object to avoid bugss when water shader fails this.water = { render: function() {}, material: { uniforms: { time: { value: 0 } } } }; //Axes: this.add(new THREE.AxisHelper(600)); } this.waves = []; let scope = this; if (params.parentGUI) { this.conf = params.parentGUI.addFolder("Ocean"); this.conf.open(); //Cos menu this.currentCos = new DirectionalCosine(); //{A:NaN,T:NaN,theta:NaN,phi:NaN}); //dummy object let pcos = new Proxy( /*ptarget*/ {}, { get: function(obj, prop) { return scope.currentCos[prop]; }, set: function(obj, prop, value) { scope.currentCos[prop] = value; wavCre.setWaveDef( (2 * Math.PI) / scope.currentCos["T"], scope.currentCos["A"], scope.currentCos["theta"] ); updateMotion(); return true; //debug }, ownKeys: function(obj) { return Object.getOwnPropertyNames(scope.currentCos); } } ); this.conf.add(pcos, "A", 0.0, 10.0, 0.1).name("Amplitude (A)"); this.conf.add(pcos, "T", 2.0, 20.0, 0.1).name("Period (T)"); //Wave length is a consequence of period due to dispersion relation //this.conf.add(pcos, "L", 6.0, 700.0, 0.5).name("Length (L)"); this.conf .add(pcos, "theta", 0, 360, 0.01) .name("

Direction (θ)

"); this.conf .add(pcos, "phi", -180, 180, 0.01) .name("

Phase (Φ)

"); //Dispose of temporary cosine wave object this.currentCos = {}; this.conf.updateDisplay(); } } Ocean.prototype = Object.create(THREE.Mesh.prototype); Object.assign(Ocean.prototype, { constructor: Ocean, addCosineWave: function(params) { params = params || {}; let w = new DirectionalCosine(params); this.waves.push(w); wavCre.setWaveDef((2 * Math.PI) / w["T"], w["A"], w["theta"]); this.currentCos = w; if (this.conf) { this.conf.updateDisplay(); this.conf.open(); } return w; }, calculateZ: function(x, y, t) { let z = 0; for (let w of this.waves) { z += w.calculate(x, y, t); } return z; }, //It appears the y axis was inverted here. //I fixed it, but am not sure how it was wrong. update: function(t) { let pos = this.geometry.getAttribute("position"); let size = this.size; let segs = this.segments; //REGULAR GRID: let vSize = segs + 1; for (let j = 0; j < vSize; j++) { let y = (0.5 - j / segs) * size; //(j/segs-0.5)*size; for (let i = 0; i < vSize; i++) { let x = (i / segs - 0.5) * size; let z = this.calculateZ(x, y, t); pos.setZ(j * vSize + i, z); } } pos.needsUpdate = true; this.geometry.computeVertexNormals(); this.water.material.uniforms.time.value = t; } }); return Ocean; }39:[] 31:{"id":"25c6ba014ddea6e5","slug":"ship-in-regular-wave","title":"Ship in Regular Wave","thumbnail":"b1ab108a272d4b4be33ab96038df928ee88df182f9faaab22bfb5fdead38979c","access_level":"public","create_time":"$D2019-09-09T08:49:04.658Z","update_time":"$D2022-03-03T12:00:12.183Z","view_time":null,"first_public_time":"$D2019-09-12T13:24:20.164Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"45fe56d5093061eb","login":"icarofonseca","name":"Icaro Fonseca","avatar_url":"https://avatars-next.observableusercontent.com/74086e355d9bde53fd85227b6dd08934b5747470968c89184341654aa47c5050","tier":"starter_2024"},"version":863,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2c2510ce71e416b","login":"icarofonseca","name":"Icaro Fonseca","avatar_url":"https://avatars-next.observableusercontent.com/74086e355d9bde53fd85227b6dd08934b5747470968c89184341654aa47c5050","tier":null}],"members":[{"type":"individual","id":"e2c2510ce71e416b","login":"icarofonseca","name":"Icaro Fonseca","avatar_url":"https://avatars-next.observableusercontent.com/74086e355d9bde53fd85227b6dd08934b5747470968c89184341654aa47c5050","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"89021f70c119f9be","slug":"vessel-js","title":"Vessel.js","owner":{"id":"45fe56d5093061eb","login":"icarofonseca","name":"Icaro Fonseca"}},"type":"notebook","body":{"title":"Ship in Regular Wave","cells":[{"id":0,"value":"md`# Ship in Regular Wave`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"mutable states = ship.designState.clone();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"wavMo = {\n const wavMo = new Vessel.WaveMotion(ship, states, wavCre);\n wavMo.output.push(\"rollAmp\");\n return wavMo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"function updateMotion() {\n wavMo.writeOutput();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"wavCre = {\n const wavCre = new Vessel.WaveCreator();\n wavCre.setWaveDef(0.6, 2.25, 180);\n return wavCre;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n invalidation.then(() => renderer.dispose());\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"camera = new THREE.PerspectiveCamera(26, window.innerWidth / window.innerHeight, 1, 1000000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"scene = new THREE.Scene();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"ship3D = new Ship3D(ship, {\n\tshipState: mutable states,\n\tstlPath: \"https://shiplab.github.io/vesseljs/examples/3D_models/STL/various\",\n\tupperColor: 0x33aa33,\n\tlowerColor: 0xaa3333,\n\thullOpacity: 1,\n\tdeckOpacity: 1,\n\tobjectOpacity: 1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"ship = new Vessel.Ship(spec);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"spec = d3.json(\"https://shiplab.github.io/vesseljs/examples/ship_specs/PX121.json\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`Snippets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Vessel = require('ntnu-vessel@0.1.1/vessel.js').catch(() => window[\"Vessel\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three@0.99.0/examples/js/loaders/STLLoader.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"dat = require('dat.gui')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"