https://www.kpit.com/wp-content/themes/kpit-wp/assets/js/waveOnly.js?ver=1.0

1import * as THREE from 'three';
2const SEPARATION3 = 60, AMOUNTX3 = 80, AMOUNTY3 = 70;
3let container, stats;
4let camera3, scene3, renderer3;
5let particles3 = null, count = 0;
6let mouseX = 0, mouseY = 0;
7if (document.querySelector(".comm-wave")) {
8    init3();
9}
10function init3() {
11    const sizes = {
12        width: $(".comm-wave").width(),
13        height: $(".comm-wave").height()
14    }
15    camera3 = new THREE.PerspectiveCamera(80, sizes.width / sizes.height, 1, 10000);
16    camera3.position.z = 100;
17    camera3.position.y = 100;
18    camera3.rotation.x = 0.5;
19    scene3 = new THREE.Scene();
20
21
22    const numParticles = AMOUNTX3 * AMOUNTY3;
23    const positions = new Float32Array(numParticles * 3);
24    const scales = new Float32Array(numParticles);
25    const shapeTypes = new Float32Array(numParticles);
26    let i = 0, j = 0;
27
28    for (let ix = 0; ix < AMOUNTX3; ix++) {
29        for (let iy = 0; iy < AMOUNTY3; iy++) {
30            positions[i] = ix * SEPARATION3 - ((AMOUNTX3 * SEPARATION3) / 2); // x
31            positions[i + 1] = 0;
32            positions[i + 2] = iy * SEPARATION3 - ((AMOUNTY3 * SEPARATION3) / 2); // z
33            scales[j] = 1;
34            shapeTypes[j] = Math.random() < 0.5 ? 0.0 : 1.0;
35            i += 3;
36            j++;
37        }
38    }
39
40    const geometry = new THREE.BufferGeometry();
41    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
42    geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
43    geometry.setAttribute('shapeType', new THREE.BufferAttribute(shapeTypes, 1));
44    const material = new THREE.ShaderMaterial({
45        uniforms: {
46            color: { value: new THREE.Color(0xB5FF5E) },
47            opacity: { value: 1.0 }
48        },
49        blending: THREE.AdditiveBlending,
50        vertexShader: `attribute float scale;
51            attribute float shapeType;
52            varying float vShapeType;
53
54            varying vec2 vPointScale;
55
56
57
58            void main() {
59
60                vShapeType = shapeType;
61
62                vPointScale = (shapeType < 0.5) ? vec2(1.0, 1.0) : vec2(1.0, 2.0);
63
64                vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
65
66                gl_PointSize = scale * (200.0 / -mvPosition.z);
67
68                gl_Position = projectionMatrix * mvPosition;
69
70            }`,
71
72        fragmentShader: `uniform vec3 color;
73
74            uniform float opacity;
75
76            varying float vShapeType;
77
78            varying vec2 vPointScale;
79
80
81
82            // void main() {
83
84            //     vec2 coord = (gl_PointCoord - vec2(0.5)) * vPointScale + vec2(0.5);
85
86
87
88            //     if (vShapeType < 0.5) {
89
90            //         if (length(coord - vec2(0.5)) > 0.475) discard;
91
92            //     } else {
93
94            //         if (coord.y < 0.0 || coord.y > 1.0 || coord.x < 0.0 || coord.x > 1.0) discard;
95
96            //     }
97
98
99
100            //     gl_FragColor = vec4(color, 1.0);
101
102            // }
103
104            
105
106            
107
108void main() {
109
110    // Scale the point coordinate to make sure it's symmetric
111
112    vec2 coord = (gl_PointCoord - vec2(0.5)) * vPointScale + vec2(0.5);
113
114    float dist = length(coord - vec2(0.5));  // Distance from the center of the point
115
116
117
118    // Smooth the edges of the circle using smoothstep
119
120    float alpha = 1.0 - smoothstep(0.43, 0.5, dist);  // Soft transition for edges
121
122    
123
124    if (vShapeType < 0.5) {
125
126        // Anti-aliasing the circular particles
127
128        if (dist > 0.5) discard;  // Completely discard pixels outside the circle
129
130        gl_FragColor = vec4(color, alpha * 1.0);  // Use alpha blending for smooth edges
131
132    } else {
133
134        // For square shapes (you can remove this if only circles are needed)
135
136        if (coord.y < 0.0 || coord.y > 1.0 || coord.x < 0.0 || coord.x > 1.0) discard;
137
138        gl_FragColor = vec4(color, 1.0);
139
140    }
141
142}
143
144            `
145
146
147
148        ,
149
150        transparent: true,
151
152        // wireframe: true
153
154
155
156    });
157
158    material.uniforms.opacity.value = 0.5;
159
160    material.needsUpdate = true;
161
162
163
164    particles3 = new THREE.Points(geometry, material);
165
166    scene3.add(particles3);
167
168    scene3.rotation.x = 0.6;
169
170    scene3.scale.x = 1.5;
171
172    scene3.scale.y = 1.5;
173
174    scene3.scale.z = 1.5;
175
176
177
178    gsap.timeline({
179
180        scrollTrigger: {
181
182            trigger: ".comm-wave",
183
184            start: "0% 50%",
185
186            end: "0% 0%",
187
188            // markers: true,
189
190            scrub: 1
191
192        },
193
194    })
195
196        .to(camera3.position, {
197
198            y: 900
199
200        }, 0)
201
202        .to(".comm-wave", {
203
204            opacity: 1
205
206        }, 0)
207
208
209
210
211
212    gsap.timeline({
213
214        scrollTrigger: {
215
216            trigger: ".comm-wave",
217
218            start: "0% 50%",
219
220            end: "0% 50%",
221
222            // markers: true,
223
224            toggleActions: "play none none reverse",
225
226            preventOverlaps: true
227
228        },
229
230    })
231
232        .to(".pre-footer-wrap", {
233
234            scale: 1,
235
236            opacity: 1,
237
238            duration: 0.8
239
240        }, 0)
241
242
243
244    var container = document.querySelector(".comm-wave")
245
246    const canvas = document.querySelector("#comm-wave")
247
248    renderer3 = new THREE.WebGLRenderer({
249
250        canvas: canvas, alpha: true, antialias: true
251
252    });
253
254    renderer3.setPixelRatio(window.devicePixelRatio);
255
256    renderer3.setSize(sizes.width, sizes.height);
257
258    renderer3.setAnimationLoop(animate3);
259
260    container.addEventListener('pointermove', onPointerMove);
261
262    renderer3.setPixelRatio(Math.min(window.devicePixelRatio, 20));
263
264}
265
266
267
268
269
270function animate3() {
271
272    render3();
273
274}
275
276function onPointerMove(event) {
277
278
279
280    let windowHalfX = window.innerWidth / 2;
281
282    let windowHalfY = window.innerHeight / 2;
283
284
285
286    if (event.isPrimary === false) return;
287
288
289
290    mouseX = event.clientX - windowHalfX;
291
292    mouseY = event.clientY - windowHalfY;
293
294
295
296}
297
298
299
300function render3() {
301
302    // camera.position.x += (mouseX - camera.position.x) * 0.02;
303
304    if (particles3) {
305
306        const positions = particles3.geometry.attributes.position.array;
307
308        const scales = particles3.geometry.attributes.scale.array;
309
310        let i = 0, j = 0;
311
312        for (let i = 0; i < scales.length; i++) {
313
314            scales[i] = (Math.sin(i + count) + 1) * 10;
315
316        }
317
318        for (let ix = 0; ix < AMOUNTX3; ix++) {
319
320            for (let iy = 0; iy < AMOUNTY3; iy++) {
321
322                positions[i + 1] = (Math.sin((ix + count) * 0.3) * 50) +
323
324                    (Math.sin((iy + count) * 0.5) * 50);
325
326
327
328                scales[j] = (Math.sin((ix + count) * 0.3) + 1) * 20 +
329
330                    (Math.sin((iy + count) * 0.5) + 1) * 20;
331
332                i += 3;
333
334                j++;
335
336            }
337
338        }
339
340        particles3.geometry.attributes.position.needsUpdate = true;
341
342        particles3.geometry.attributes.scale.needsUpdate = true;
343
344        particles3.material.uniforms.opacity.value = Math.abs(Math.sin(count * 0.1));
345
346        particles3.material.needsUpdate = true;
347
348    }
349
350    renderer3.render(scene3, camera3);
351
352    count += 0.08;
353
354}
355
356
357