ocearo-ui
Version:
Ocean Robot UI: 3D visualization dashboard for signalk
54 lines (47 loc) • 12.7 kB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,82897,60099,e=>{"use strict";let t,r;var i=e.i(31067),n=e.i(71645),a=e.i(15080),o=e.i(71753),l=e.i(90072);let s=n.forwardRef(({envMap:e,resolution:t=256,frames:r=1/0,makeDefault:s,children:u,...c},d)=>{let f=(0,a.useThree)(({set:e})=>e),h=(0,a.useThree)(({camera:e})=>e),m=(0,a.useThree)(({size:e})=>e),p=n.useRef(null);n.useImperativeHandle(d,()=>p.current,[]);let x=n.useRef(null),v=function(e,t,r){let i=(0,a.useThree)(e=>e.size),o=(0,a.useThree)(e=>e.viewport),s="number"==typeof e?e:i.width*o.dpr,u=i.height*o.dpr,c=("number"==typeof e?void 0:e)||{},{samples:d=0,depth:f,...h}=c,m=null!=f?f:c.depthBuffer,p=n.useMemo(()=>{let e=new l.WebGLRenderTarget(s,u,{minFilter:l.LinearFilter,magFilter:l.LinearFilter,type:l.HalfFloatType,...h});return m&&(e.depthTexture=new l.DepthTexture(s,u,l.FloatType)),e.samples=d,e},[]);return n.useLayoutEffect(()=>{p.setSize(s,u),d&&(p.samples=d)},[d,p,s,u]),n.useEffect(()=>()=>p.dispose(),[]),p}(t);n.useLayoutEffect(()=>{c.manual||(p.current.aspect=m.width/m.height)},[m,c]),n.useLayoutEffect(()=>{p.current.updateProjectionMatrix()});let g=0,y=null,M="function"==typeof u;return(0,o.useFrame)(t=>{M&&(r===1/0||g<r)&&(x.current.visible=!1,t.gl.setRenderTarget(v),y=t.scene.background,e&&(t.scene.background=e),t.gl.render(t.scene,p.current),t.scene.background=y,t.gl.setRenderTarget(null),x.current.visible=!0,g++)}),n.useLayoutEffect(()=>{if(s)return f(()=>({camera:p.current})),()=>f(()=>({camera:h}))},[p,s,f]),n.createElement(n.Fragment,null,n.createElement("perspectiveCamera",(0,i.default)({ref:p},c),!M&&u),n.createElement("group",{ref:x},M&&u(v.texture)))});e.s(["PerspectiveCamera",()=>s],82897);var u=e.i(88014);let c=new l.Vector3,d=new l.Vector3,f=new l.Vector3,h=new l.Vector2;function m(e,t,r){let i=c.setFromMatrixPosition(e.matrixWorld);i.project(t);let n=r.width/2,a=r.height/2;return[i.x*n+n,-(i.y*a)+a]}let p=e=>1e-10>Math.abs(e)?0:e;function x(e,t,r=""){let i="matrix3d(";for(let r=0;16!==r;r++)i+=p(t[r]*e.elements[r])+(15!==r?",":")");return r+i}let v=(t=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>x(e,t)),g=(r=e=>[1/e,1/e,1/e,1,-1/e,-1/e,-1/e,-1,1/e,1/e,1/e,1,1,1,1,1],(e,t)=>x(e,r(t),"translate(-50%,-50%)")),y=n.forwardRef(({children:e,eps:t=.001,style:r,className:s,prepend:x,center:y,fullscreen:M,portal:P,distanceFactor:b,sprite:w=!1,transform:E=!1,occlude:T,onOcclude:R,castShadow:j,receiveShadow:S,material:C,geometry:F,zIndexRange:W=[0x1000037,0],calculatePosition:I=m,as:L="div",wrapperClass:$,pointerEvents:z="auto",...A},k)=>{let{gl:B,camera:H,scene:O,size:U,raycaster:V,events:N,viewport:_}=(0,a.useThree)(),[D]=n.useState(()=>document.createElement(L)),G=n.useRef(null),K=n.useRef(null),q=n.useRef(0),Z=n.useRef([0,0]),Y=n.useRef(null),J=n.useRef(null),Q=(null==P?void 0:P.current)||N.connected||B.domElement.parentNode,X=n.useRef(null),ee=n.useRef(!1),et=n.useMemo(()=>{var e;return T&&"blending"!==T||Array.isArray(T)&&T.length&&(e=T[0])&&"object"==typeof e&&"current"in e},[T]);n.useLayoutEffect(()=>{let e=B.domElement;T&&"blending"===T?(e.style.zIndex=`${Math.floor(W[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)},[T]),n.useLayoutEffect(()=>{if(K.current){let e=G.current=u.createRoot(D);if(O.updateMatrixWorld(),E)D.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{let e=I(K.current,H,U);D.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Q&&(x?Q.prepend(D):Q.appendChild(D)),()=>{Q&&Q.removeChild(D),e.unmount()}}},[Q,E]),n.useLayoutEffect(()=>{$&&(D.className=$)},[$]);let er=n.useMemo(()=>E?{position:"absolute",top:0,left:0,width:U.width,height:U.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:y?"translate3d(-50%,-50%,0)":"none",...M&&{top:-U.height/2,left:-U.width/2,width:U.width,height:U.height},...r},[r,y,M,U,E]),ei=n.useMemo(()=>({position:"absolute",pointerEvents:z}),[z]);n.useLayoutEffect(()=>{var t,i;ee.current=!1,E?null==(t=G.current)||t.render(n.createElement("div",{ref:Y,style:er},n.createElement("div",{ref:J,style:ei},n.createElement("div",{ref:k,className:s,style:r,children:e})))):null==(i=G.current)||i.render(n.createElement("div",{ref:k,style:er,className:s,children:e}))});let en=n.useRef(!0);(0,o.useFrame)(e=>{if(K.current){H.updateMatrixWorld(),K.current.updateWorldMatrix(!0,!1);let e=E?Z.current:I(K.current,H,U);if(E||Math.abs(q.current-H.zoom)>t||Math.abs(Z.current[0]-e[0])>t||Math.abs(Z.current[1]-e[1])>t){var r;let t,i,n,a,o=(r=K.current,t=c.setFromMatrixPosition(r.matrixWorld),i=d.setFromMatrixPosition(H.matrixWorld),n=t.sub(i),a=H.getWorldDirection(f),n.angleTo(a)>Math.PI/2),s=!1;et&&(Array.isArray(T)?s=T.map(e=>e.current):"blending"!==T&&(s=[O]));let u=en.current;s?en.current=function(e,t,r,i){let n=c.setFromMatrixPosition(e.matrixWorld),a=n.clone();a.project(t),h.set(a.x,a.y),r.setFromCamera(h,t);let o=r.intersectObjects(i,!0);if(o.length){let e=o[0].distance;return n.distanceTo(r.ray.origin)<e}return!0}(K.current,H,V,s)&&!o:en.current=!o,u!==en.current&&(R?R(!en.current):D.style.display=en.current?"block":"none");let m=Math.floor(W[0]/2),x=T?et?[W[0],m]:[m-1,0]:W;if(D.style.zIndex=`${function(e,t,r){if(t instanceof l.PerspectiveCamera||t instanceof l.OrthographicCamera){let i=c.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),a=i.distanceTo(n),o=(r[1]-r[0])/(t.far-t.near),l=r[1]-o*t.far;return Math.round(o*a+l)}}(K.current,H,x)}`,E){let[e,t]=[U.width/2,U.height/2],r=H.projectionMatrix.elements[5]*t,{isOrthographicCamera:i,top:n,left:a,bottom:o,right:l}=H,s=v(H.matrixWorldInverse),u=i?`scale(${r})translate(${p(-(l+a)/2)}px,${p((n+o)/2)}px)`:`translateZ(${r}px)`,c=K.current.matrixWorld;w&&((c=H.matrixWorldInverse.clone().transpose().copyPosition(c).scale(K.current.scale)).elements[3]=c.elements[7]=c.elements[11]=0,c.elements[15]=1),D.style.width=U.width+"px",D.style.height=U.height+"px",D.style.perspective=i?"":`${r}px`,Y.current&&J.current&&(Y.current.style.transform=`${u}${s}translate(${e}px,${t}px)`,J.current.style.transform=g(c,1/((b||10)/400)))}else{let t=void 0===b?1:function(e,t){if(t instanceof l.OrthographicCamera)return t.zoom;if(!(t instanceof l.PerspectiveCamera))return 1;{let r=c.setFromMatrixPosition(e.matrixWorld),i=d.setFromMatrixPosition(t.matrixWorld);return 1/(2*Math.tan(t.fov*Math.PI/180/2)*r.distanceTo(i))}}(K.current,H)*b;D.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}Z.current=e,q.current=H.zoom}}if(!et&&X.current&&!ee.current)if(E){if(Y.current){let e=Y.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){let{isOrthographicCamera:t}=H;if(t||F)A.scale&&(Array.isArray(A.scale)?A.scale instanceof l.Vector3?X.current.scale.copy(A.scale.clone().divideScalar(1)):X.current.scale.set(1/A.scale[0],1/A.scale[1],1/A.scale[2]):X.current.scale.setScalar(1/A.scale));else{let t=(b||10)/400,r=e.clientWidth*t,i=e.clientHeight*t;X.current.scale.set(r,i,1)}ee.current=!0}}}else{let t=D.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){let e=1/_.factor,r=t.clientWidth*e,i=t.clientHeight*e;X.current.scale.set(r,i,1),ee.current=!0}X.current.lookAt(e.camera.position)}});let ea=n.useMemo(()=>({vertexShader:E?void 0:`
/*
This shader is from the THREE's SpriteMaterial.
We need to turn the backing plane into a Sprite
(make it always face the camera) if "transfrom"
is false.
*/
#include <common>
void main() {
vec2 center = vec2(0., 1.);
float rotation = 0.0;
// This is somewhat arbitrary, but it seems to work well
// Need to figure out how to derive this dynamically if it even matters
float size = 0.03;
vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
vec2 scale;
scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
bool isPerspective = isPerspectiveMatrix( projectionMatrix );
if ( isPerspective ) scale *= - mvPosition.z;
vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
vec2 rotatedPosition;
rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
mvPosition.xy += rotatedPosition;
gl_Position = projectionMatrix * mvPosition;
}
`,fragmentShader:`
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}
`}),[E]);return n.createElement("group",(0,i.default)({},A,{ref:K}),T&&!et&&n.createElement("mesh",{castShadow:j,receiveShadow:S,ref:X},F||n.createElement("planeGeometry",null),C||n.createElement("shaderMaterial",{side:l.DoubleSide,vertexShader:ea.vertexShader,fragmentShader:ea.fragmentShader})))});e.s(["Html",()=>y],60099)},8418,e=>{"use strict";var t=e.i(43476),r=e.i(71645),i=e.i(15080),n=e.i(30297),a=e.i(82897),o=e.i(60099),l=e.i(43257),s=e.i(90072),u=e.i(67561),c=e.i(66326),d=e.i(85709);let f=(e,t,r,i)=>{let n=e*Math.PI/180,a=r*Math.PI/180,o=(r-e)*Math.PI/180,l=(i-t)*Math.PI/180,s=Math.sin(o/2)*Math.sin(o/2)+Math.cos(n)*Math.cos(a)*Math.sin(l/2)*Math.sin(l/2);return 2*Math.atan2(Math.sqrt(s),Math.sqrt(1-s))*6371e3},h=()=>{let e=(0,r.useRef)(),[i,n]=(0,r.useState)(null),{subscribe:a,unsubscribe:o}=(0,u.useOcearoContext)(),l=(0,d.useSignalKPath)("navigation.position");return(0,r.useEffect)(()=>{l&&!i&&n({latitude:l.latitude,longitude:l.longitude})},[l,i]),(0,r.useEffect)(()=>{if(e.current){let t=new s.BufferGeometry,r=[];for(let e=0;e<=64;e++){let t=e/64*Math.PI*2;r.push(50*Math.cos(t),0,50*Math.sin(t))}t.setAttribute("position",new s.Float32BufferAttribute(r,3)),e.current.geometry=t}},[]),(0,r.useEffect)(()=>{if(!i||!l||!e.current)return;let t=f(i.latitude,i.longitude,i.latitude,l.longitude),r=f(i.latitude,i.longitude,l.latitude,i.longitude),n=l.longitude>i.longitude?t:-t,a=l.latitude>i.latitude?r:-r;e.current.position.set(n,-6.9,a)},[i,l]),(0,t.jsx)("line",{ref:e,children:(0,t.jsx)("lineBasicMaterial",{attach:"material",color:u.oYellow,linewidth:3,transparent:!0,opacity:.6})})};e.s(["default",0,({onUpdateInfoPanel:e})=>{let d=(0,r.useRef)(),{size:f}=(0,i.useThree)(),{nightMode:m}=(0,u.useOcearoContext)(),p=f.width/f.height;return(0,t.jsxs)(r.Suspense,{fallback:(0,t.jsx)(o.Html,{children:"Loading..."}),children:[(0,t.jsx)(a.PerspectiveCamera,{makeDefault:!0,fov:25,aspect:p,near:1,far:1e3,position:[32,10,-32]}),(0,t.jsx)(n.OrbitControls,{enableZoom:!0,enableRotate:!0,maxPolarAngle:Math.PI/2,minPolarAngle:Math.PI/4}),(0,t.jsx)(l.Environment,{files:"./assets/ocearo_env.hdr",background:!1}),(0,t.jsx)("ambientLight",{intensity:.2}),(0,t.jsx)("directionalLight",{position:[15,30,20],intensity:1.2,castShadow:!1,color:m?"#b0d8ff":"#ffffff"}),(0,t.jsx)("spotLight",{position:[0,50,100],intensity:.8,angle:.6,penumbra:1,color:m?"#4080ff":"#ffffff"}),(0,t.jsx)("pointLight",{position:[-10,10,-10],intensity:.5}),(0,t.jsx)(c.default,{ref:d,scale:[1.3,1.3,1.3],position:[0,-6,0],onUpdateInfoPanel:e}),(0,t.jsx)(h,{}),(0,t.jsxs)("mesh",{rotation:[-Math.PI/2,0,0],position:[0,-7,0],receiveShadow:!0,children:[(0,t.jsx)("planeGeometry",{args:[100,100]}),(0,t.jsx)("shaderMaterial",{uniforms:{uColor:{value:new s.Color(m?"#050505":"#0a0a0a")},uBlurRadius:{value:.15}},vertexShader:`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,fragmentShader:`
uniform vec3 uColor;
uniform float uBlurRadius;
varying vec2 vUv;
void main() {
float distanceToCenter = length(vUv - vec2(0.5));
float alpha = smoothstep(0.5 - uBlurRadius, 0.5 + uBlurRadius, distanceToCenter);
gl_FragColor = vec4(uColor, 1.0 - alpha);
}
`})]})]})}],8418)},69675,e=>{e.n(e.i(8418))}]);