mirror of https://github.com/istio/istio.io.git
55 lines
6.1 KiB
JavaScript
55 lines
6.1 KiB
JavaScript
var __awaiter=this&&this.__awaiter||function(a,b,c,d){function e(a){return a instanceof c?a:new c(function(b){b(a)})}return new(c||(c=Promise))(function(c,f){function g(a){try{i(d.next(a))}catch(a){f(a)}}function h(a){try{i(d["throw"](a))}catch(a){f(a)}}function i(a){a.done?c(a.value):e(a.value).then(g,h)}i((d=d.apply(a,b||[])).next())})};import*as THREE from"three";const vertexShader=`
|
|
#define PI 3.14159265359
|
|
|
|
// Uniform variables for time and point size, as well as parameters for two transformations
|
|
uniform float u_time;
|
|
uniform float u_pointsize;
|
|
uniform float u_transformation_amp_1;
|
|
uniform float u_transformation_freq_1;
|
|
uniform float u_transformation_speed_1;
|
|
uniform float u_transformation_amp_2;
|
|
uniform float u_transformation_freq_2;
|
|
uniform float u_transformation_speed_2;
|
|
|
|
void main() {
|
|
// Initialize position with the vertex's original position
|
|
vec3 pos = position;
|
|
|
|
// Apply two sinusoidal transformations to the z-coordinate of the position
|
|
pos.z += sin(pos.x * u_transformation_freq_1 + u_time * u_transformation_speed_1) * u_transformation_amp_1;
|
|
pos.z += cos(pos.y * u_transformation_freq_2 - u_time * u_transformation_speed_2 * 0.6) * u_transformation_amp_2;
|
|
|
|
// Adjust the point size based on the absolute z-coordinate
|
|
gl_PointSize = max(u_pointsize + abs(pos.z) * 6.0, 0.0);
|
|
|
|
// Apply model-view and projection transformations to the position
|
|
vec4 mvm = modelViewMatrix * vec4(pos, 1.0);
|
|
gl_Position = projectionMatrix * mvm;
|
|
}
|
|
`,fragmentShader=`
|
|
// Uniform variable for time
|
|
uniform float u_time;
|
|
#ifdef GL_ES
|
|
precision mediump float;
|
|
#endif
|
|
|
|
void main() {
|
|
// Calculate the distance from the center of the point
|
|
vec2 st = gl_PointCoord - vec2(0.5);
|
|
float r = length(st);
|
|
|
|
// Discard fragments outside a circular region
|
|
if (r > 0.5) {
|
|
discard;
|
|
}
|
|
|
|
// Calculate alpha (transparency) based on the depth of the fragment
|
|
float alpha = 1.0 - gl_FragCoord.z * 1.095;
|
|
alpha = clamp(alpha, 0.0, 1.0);
|
|
|
|
// Set the final fragment color with a blue tone and transparency
|
|
gl_FragColor = vec4(vec3(0.42, 0.635, 0.835), alpha);
|
|
}
|
|
`;function createCamera(a=45,b=.1,c=100,d={x:0,y:0,z:0},e={x:0,y:0,z:0},f=window.innerWidth/window.innerHeight){const g=new THREE.PerspectiveCamera(a,f,b,c);return g.position.set(d.x,d.y,d.z),g.lookAt(e.x,e.y,e.z),g.updateProjectionMatrix(),g}function createRenderer(a={}){const b=document.getElementById("hero"),c=new THREE.WebGLRenderer(Object.assign(Object.assign({},a),{alpha:!0}));return c.domElement.id="hero-animation",c.setPixelRatio(window.devicePixelRatio),c.setSize(b.offsetWidth,b.offsetHeight),c.setClearColor(16777215,0),c.domElement.id="hero-animation",c}function runAnimation(a,b,c,d,e=!1,f=getDefaultUniforms()){const g=document.getElementById("hero");g.appendChild(c.domElement),window.addEventListener("resize",()=>{let a=document.getElementById("hero");d.aspect=a.offsetWidth/a.offsetHeight,d.updateProjectionMatrix(),c.setSize(a.offsetWidth,a.offsetHeight),f.u_resolution!==void 0&&(f.u_resolution.value.x=window.innerWidth*window.devicePixelRatio,f.u_resolution.value.y=window.innerHeight*window.devicePixelRatio)}),a.updateScene===void 0&&(a.updateScene=(a,b)=>{}),Object.assign(a,Object.assign(Object.assign({},a),{container:g}));const h=new THREE.Clock,i=()=>{e&&requestAnimationFrame(i);const g=h.getDelta(),j=h.getElapsedTime();f.u_time.value=j,a.updateScene(g,j),c.render(b,d)};a.initScene().then(i).then(()=>{c.info.reset()}).catch(a=>{console.log(a)})}let scene=new THREE.Scene,renderer=createRenderer({antialias:!1}),camera=createCamera(60,1,100,{x:0,y:0,z:4.5});const uniforms={u_time:{value:0},u_resolution:{value:{x:window.innerWidth*window.devicePixelRatio,y:window.innerHeight*window.devicePixelRatio}},u_pointsize:{value:3},u_transformation_freq_1:{value:3},u_transformation_amp_1:{value:.8},u_transformation_speed_1:{value:.25},u_transformation_freq_2:{value:2},u_transformation_amp_2:{value:.7},u_transformation_speed_2:{value:.2}};let app={vertexShader:"\n #define PI 3.14159265359\n \n // Uniform variables for time and point size, as well as parameters for two transformations\n uniform float u_time;\n uniform float u_pointsize;\n uniform float u_transformation_amp_1;\n uniform float u_transformation_freq_1;\n uniform float u_transformation_speed_1;\n uniform float u_transformation_amp_2;\n uniform float u_transformation_freq_2;\n uniform float u_transformation_speed_2;\n \n void main() {\n // Initialize position with the vertex's original position\n vec3 pos = position;\n \n // Apply two sinusoidal transformations to the z-coordinate of the position\n pos.z += sin(pos.x * u_transformation_freq_1 + u_time * u_transformation_speed_1) * u_transformation_amp_1;\n pos.z += cos(pos.y * u_transformation_freq_2 - u_time * u_transformation_speed_2 * 0.6) * u_transformation_amp_2;\n \n // Adjust the point size based on the absolute z-coordinate\n gl_PointSize = max(u_pointsize + abs(pos.z) * 6.0, 0.0);\n \n // Apply model-view and projection transformations to the position\n vec4 mvm = modelViewMatrix * vec4(pos, 1.0);\n gl_Position = projectionMatrix * mvm;\n }\n ",fragmentShader,initScene(){return __awaiter(this,void 0,void 0,function*(){this.geometry=new THREE.PlaneGeometry(10,5,50,40);const a=new THREE.ShaderMaterial({uniforms:Object.assign(Object.assign({},uniforms),{cameraPosition:{value:camera.position}}),vertexShader:this.vertexShader,fragmentShader:this.fragmentShader,transparent:!0,depthTest:!1});this.mesh=new THREE.Points(this.geometry,a),scene.add(this.mesh),this.mesh.rotation.x=3.1415/2,this.mesh.rotation.y=3.1415/4})},updateScene(a,b){uniforms.u_time.value+=.001*a,this.mesh.material.uniforms.cameraPosition.value.copy(camera.position)}};runAnimation(app,scene,renderer,camera,!0,uniforms);
|
|
|
|
//# sourceMappingURL=headerAnimation.min.js.map
|