1var Digital = (function () { 2 3 function Digital() { 4 if (!(this instanceof Digital)) { 5 return new Digital(); 6 } 7 } 8 9 var superEaseIN = "M0,0,C0,0,0.668,0,0.84,0.036,1.076,0.085,0.922,1,1,1"; 10 11 12 Digital.prototype.Init = function(selector){ 13 this.el = document.querySelector(selector), 14 // this.stickyOverflow = this.el.querySelector(".sticky-overflow"), 15 this.matrixContainer = this.el.querySelector(".experience-display-matrix"), 16 this.displayHardware = this.el.querySelector(".display-hardware img"), 17 this.posterFrame = this.el.querySelector(".display-posterframe img"), 18 this.endFrame = this.el.querySelector(".display-endframe img"), 19 this.anchorEl = this.el.querySelector(".timeline-display"), 20 // this.animGroup = this.anim.getGroupForTarget(this.el), 21 this.screenSize = parseFloat(getComputedStyle(this.matrixContainer).getPropertyValue("--screen-to-hardware-ratio")), 22 this.camera, 23 this.perspective, 24 this.scene, 25 this.keyFrames = [], 26 this.renderer, 27 this.layers = {}, 28 this.baseKeyframes = { 29 start: "a0t", 30 end: "a0t + 140vh", 31 anchors: [this.anchorEl], 32 disabledWhen: ["no-enhanced"] 33 }, 34 this.textureOptions = { 35 HARDWARE_TEXTURE: {}, 36 POSTERFRAME_TEXTURE: {}, 37 ENDFRAME_TEXTURE: {}, 38 DOT_COUNT_MULTIPLIER: { 39 S: .5, 40 M: .75 41 } 42 }, 43 this.dotMultiple = 1, 44 this._render = this._render.bind(this); 45 // this._destroy = this._destroy.bind(this); 46 this.controller = new ScrollMagic.Controller(); 47 48 var self = this; 49 loadjs.ready('threejs', function () { 50 self.mounted(); 51 }); 52 if (!loadjs.isDefined('threejs')) { 53 loadjs(['/plugins/threejs/three.min.js?_=' + cacheId], 'threejs'); 54 } 55 var onResize = _.debounce(this.onResizeDebounced, 500); 56 $(window).resize(onResize); 57 } 58 59 Digital.prototype.mounted = function() { 60 // this.gum.once(h.EVENTS.THREE_LOADED, ()=>{ 61 // this.THREE = window.THREE, 62 // this._initialize() 63 // } 64 // ), 65 // this.gum.once(h.EVENTS.THREE_NOT_LOADED, ()=>{ 66 // this._initializeFallback() 67 // } 68 // ), 69 this.THREE = window.THREE, 70 this._initialize(); 71 } 72 73 Digital.prototype._initialize = function() { 74 this.textureLoader = new this.THREE.TextureLoader; 75 var self = this; 76 Promise.all([this._loadImage(this.displayHardware, "HARDWARE_TEXTURE"), this._loadImage(this.posterFrame, "POSTERFRAME_TEXTURE")]).then(function(){ 77 // self.textureOptions.HARDWARE_TEXTURE = self.textureLoader.load(self.displayHardware.currentSrc, self._render); 78 self.textureOptions.POSTERFRAME_TEXTURE = self.textureLoader.load(self.posterFrame.currentSrc, self._render); 79 self.textureOptions.ENDFRAME_TEXTURE = self.textureLoader.load(self.endFrame.currentSrc, self._render); 80 self._setupEvents(); 81 }) 82 } 83 84 // _initializeFallback() { 85 // this.animGroup.addKeyframe(this.matrixContainer, r(r({}, this.baseKeyframes), {}, { 86 // end: "".concat(this.baseKeyframes.start, " + 20vh"), 87 // opacity: [0, 1] 88 // })), 89 // this.animGroup.addKeyframe(this.matrixContainer, r(r({}, this.baseKeyframes), {}, { 90 // end: "".concat(this.baseKeyframes.end, " + 60vh"), 91 // scale: [2.75, .24], 92 // easeFunction: "bezier(0.16, 0.00, 0.34, 1.00)" 93 // })) 94 // } 95 Digital.prototype._setupEvents = function() { 96 this._createRenderer(), 97 this._addLayers(), 98 this._setupKeyframes(); 99 this._sceneScaler(); 100 // this.anim.once("enhanced-destroy", this._destroy) 101 } 102 103 Digital.prototype._createRenderer = function() { 104 this.stickyWidth = $(window).width(), 105 this.stickyHeight = $(window).height(), 106 this.perspective = 800; 107 const e = 2 * Math.atan(this.stickyHeight / 2 / this.perspective) * this.THREE.Math.RAD2DEG; 108 this.camera = new this.THREE.PerspectiveCamera(e,this.stickyWidth / this.stickyHeight,1,5e4), 109 this.camera.position.x = 0, 110 this.camera.position.y = 0, 111 this.camera.position.z = 1, 112 this.scene = new this.THREE.Scene, 113 this.scene.background = null, 114 this.renderer = new this.THREE.WebGLRenderer({ 115 antialias: !0, 116 alpha: !0 117 }), 118 this.renderer.setClearColor(0, 0), 119 this.renderer.setPixelRatio(Math.min(1.5, window.devicePixelRatio)), 120 this._updateMatrix(), 121 this.matrixContainer.prepend(this.renderer.domElement) 122 } 123 124 Digital.prototype._addLayers = function() { 125 this.updateCachedHeight(); 126 this.scenes = []; 127 this.materialOptions = e(167, this).bind(this)(); 128 var self = this; 129 Object.keys(this.materialOptions.layers).map(e=>{ 130 this.layers[e] = new Mesh(r({ 131 id: e, 132 el: this.el, 133 THREE: this.THREE, 134 stickyWidth: this.stickyWidth, 135 stickyHeight: this.stickyHeight, 136 }, this.materialOptions.layers[e])), 137 this._layerKeyframeMaker(this.layers[e]), 138 this.scene.add(this.layers[e].mesh); 139 140 } 141 ) 142 } 143 144 Digital.prototype.updateCachedHeight = function() { 145 var self = window.Digital || this; 146 self.digitalMatrixHeight = $('.digital-matrix').height() / 2; 147 } 148 149 150 Digital.prototype._setupKeyframes = function() { 151 var self = this; 152 153 this.keyFrames.push(new ScrollMagic.Scene({ triggerElement: '.experience-display-matrix', triggerHook: 0.0, reverse: true, duration: "200%"})
154 .setPin('.experience-display-matrix', { 155 pushFollowers: false, 156 }) 157 // .addIndicators() // add indicators (requires plugin) 158 .addTo(this.controller) 159 ); 160 161 var camera = {z: 1}; 162 var cameraTween = TweenMax.to(camera, 1, { 163 z: 900, 164 onUpdate(){ 165 self.camera.position.z = camera.z; 166 self._render(); 167 }, 168 ease: CustomEase.create("custom", "M0,0,C0,0,0.074,-0.001,0.11,0.034,0.321,0.245,1,1,1,1"), 169 } ) 170 171 this.keyFrames.push(new ScrollMagic.Scene({ triggerElement: '.experience-display-matrix', triggerHook: 0.0, reverse: true, duration: "200%"}) 172 .setTween(cameraTween) 173 .on("leave", function (event) { 174 if(event.state == "AFTER") { 175 setTimeout(function(){ 176 self._render(); 177 }, 1000); 178 setTimeout(function(){ 179 self._render(); 180 }, 2000); 181 self._render(); 182 } 183 }) 184 // .addIndicators() // add indicators (requires plugin) 185 .addTo(this.controller) 186 ); 187 188 189 return; 190 this.animGroup.addKeyframe(this.renderer, r(r({}, this.baseKeyframes), {}, { 191 start: "".concat(this.baseKeyframes.start, " - 50vh"), 192 end: "a0b", 193 progress: [0, 1], 194 event: "render" 195 })).controller.friendlyName = "renderer", 196 this.animGroup.getControllerForTarget(this.renderer).on("render", ()=>{ 197 this._render() 198 } 199 ), 200 this.animGroup.addKeyframe(this.camera, r(r({}, this.baseKeyframes), {}, { 201 zPosition: [1, 800], 202 event: "update-camera", 203 easeFunction: "bezier(0.97, 0.00, 0.90, 0.45)" 204 })).controller.friendlyName = "camera", 205 this.animGroup.getControllerForTarget(this.camera).on("update-camera", e=>{ 206 this.camera.position.z = e.tweenProps.zPosition.current 207 } 208 ), 209 this.sceneScaleAnim = this.animGroup.addKeyframe(this.matrixContainer, r(r({}, this.baseKeyframes), {}, { 210 start: this.baseKeyframes.end, 211 end: "".concat(this.baseKeyframes.end, " + 60vh"), 212 uScale: [1, "(css(--scene-size) / ".concat(Math.max(this.stickyWidth, this.stickyHeight), ")")], 213 event: "update-scale", 214 easeFunction: "bezier(0.16, -0.32, 0.00, 1.00)" 215 })), 216 this.animGroup.getControllerForTarget(this.matrixContainer).on("update-scale", e=>{ 217 this.scene.scale.x = e.tweenProps.uScale.current, 218 this.scene.scale.y = e.tweenProps.uScale.current 219 } 220 ) 221 } 222 223 Digital.prototype._sceneScaler = function(item) { 224 var self = this; 225 226 var scaleObj = {scale: 1}; 227 var size = self.stickyWidth + 300; 228 // if(self.stickyWidth > 420) { 229 // size = 400; 230 // } 231 232 // if(self.stickyWidth > 768) { 233 // size = self.stickyWidth +; 234 // } 235 236 if(self.stickyWidth > 1024) { 237 size = 1024; 238 } 239 240 if(self.stickyWidth > 1200) { 241 size = 1200; 242 } 243 244 var scaleTween = TweenMax.to(scaleObj, 1, { 245 scale: size / Math.max(this.stickyWidth, this.stickyHeight), 246 onUpdate(){ 247 // self.camera.position.z = camera.z; 248 self.scene.scale.x = scaleObj.scale; 249 self.scene.scale.y = scaleObj.scale; 250 }, 251 // ease: CustomEase.create("custom", "M0,0,C0,0,0.074,-0.001,0.11,0.034,0.321,0.245,1,1,1,1"), 252 } ) 253 this.scenes.push(new ScrollMagic.Scene({ triggerElement: '.experience-display-matrix', triggerHook: 0.0, reverse: true, duration: "200%"}) 254 .setTween(scaleTween) 255 // .addIndicators() // add indicators (requires plugin) 256 .addTo(this.controller) 257 ); 258 } 259 260 Digital.prototype._layerKeyframeMaker = function(item) { 261 // console.log('e.mesh.material.uniforms.uOpacity',e.mesh.material.uniforms.uOpacity); 262 // try { 263 // e.mesh.material.opacity = 1.0; 264 // e.mesh.material.uniforms.uOpacity.value = 1.0; 265 // } catch (error) { 266 // console.error(error); 267 // } 268 // console.log(e.mesh); 269 // e.mesh.material.uniforms.uOpacity.value = 1; 270 271 if(item.id == "layer0") { 272 var tween = TweenMax.fromTo(item.mesh.material.uniforms.uOpacity, 1, { value: 0 }, { value: 1 } ); 273 this.scenes.push(new ScrollMagic.Scene({ triggerElement: '.digital-matrix', triggerHook: 0.0, reverse: true, offset: this.digitalMatrixHeight * 0.6, duration: this.digitalMatrixHeight * 0.4}) 274 .setTween(tween) 275 .addTo(this.controller) 276 ); 277 278 var zProperty = item.mesh.material.uniforms.uZPosition; 279 280 var tween2 = TweenMax.fromTo(item.mesh.position, 1, { z: zProperty.start }, { z: zProperty.end } ); 281 this.scenes.push(new ScrollMagic.Scene({ triggerElement: '.digital-matrix', triggerHook: 0.0, reverse: true, offset: this.digitalMatrixHeight * 0.6, duration: this.digitalMatrixHeight * 0.8}) 282 .setTween(tween2) 283 .addTo(this.controller) 284 ); 285 286 // item.mesh.material.uniforms.uZPosition.value = 1; 287 288 // var tween2 = TweenMax.fromTo(item.mesh.material.uniforms.uZPosition, 1, { value: 100 }, { value: 1 } ); 289 // this.scenes.push(new ScrollMagic.Scene({ triggerElement: '.digital-matrix', triggerHook: 0.0, reverse: true, offset: 200, duration: "30%"}) 290 // .setTween(tween2) 291 // .addTo(this.controller) 292 // ); 293 } 294 else { 295 if(item.id == "layer1") { 296 offset = this.digitalMatrixHeight * 0.4; 297 duration = this.digitalMatrixHeight * 0.5; 298 } else if(item.id == "layer2") { 299 offset = this.digitalMatrixHeight * 0.4; 300 duration = this.digitalMatrixHeight * 0.7; 301 } else if(item.id == "layer3") { 302 offset = this.digitalMatrixHeight * 0.4; 303 duration = this.digitalMatrixHeight * 0.7; 304 } else if(item.id == "layer4") { 305 offset = this.digitalMatrixHeight * 0.4; 306 duration = this.digitalMatrixHeight * 0.7; 307 } 308 309 for (var property in item.mesh.material.uniforms) { 310 if (Object.hasOwnProperty.call(item.mesh.material.uniforms, property)) { 311 var variable = item.mesh.material.uniforms[property]; 312 313 if(typeof variable.start != "undefined" && typeof variable.end != "undefined") { 314 var tween; 315 316 if(property == "uOpacity" && item.id != "layer1") { 317 offset = this.digitalMatrixHeight * 0.7; 318 duration = this.digitalMatrixHeight * 0.6; 319 } 320 321 if(property == "uZPosition") { 322 tween = TweenMax.fromTo(item.mesh.position, 1, { z: variable.start }, { z: variable.end } ); 323 } else { 324 tween = TweenMax.fromTo(item.mesh.material.uniforms[property], 1, { value: variable.start }, { value: variable.end } ); 325 } 326 327 328 this.scenes.push(new ScrollMagic.Scene({ triggerElement: '.digital-matrix', triggerHook: 0.0, reverse: true, offset: offset, duration: duration}) 329 .setTween(tween) 330 // .addIndicators() // add indicators (requires plugin) 331 .addTo(this.controller) 332 ); 333 } 334 } 335 } 336 } 337 // else if(item.id == "hardware") { 338 // item.mesh.material.uniforms.uZPosition.value = 50; 339 // console.log('uniforms',item.mesh.material.uniforms); 340 // } 341 342 return; 343 let t = {} 344 , i = e.mesh 345 , s = e.id 346 , n = "layer1" === s ? "60vh" : "10vh"; 347 Object.keys(i.material.uniforms).map(e=>{ 348 "start"in i.material.uniforms[e] && "end"in i.material.uniforms[e] && "uOpacity" !== e && (t[e] = [i.material.uniforms[e].start, i.material.uniforms[e].end]) 349 } 350 ); 351 let a = this.animGroup.addKeyframe(i, r(r(r({}, this.baseKeyframes), t), {}, { 352 event: "update-uniforms" 353 })); 354 switch (a.controller.friendlyName = s, 355 s) { 356 case "hardware": 357 break; 358 case "layer0": 359 this.animGroup.addKeyframe(i, r(r({}, this.baseKeyframes), {}, { 360 start: "".concat(this.baseKeyframes.end, " - 20vh"), 361 uOpacity: [i.material.uniforms.uOpacity.start, i.material.uniforms.uOpacity.end], 362 event: "update-uniforms" 363 })); 364 break; 365 default: 366 this.animGroup.addKeyframe(i, r(r({}, this.baseKeyframes), {}, { 367 end: "".concat(this.baseKeyframes.start, " + 10vh"), 368 uOpacity: [0, 1], 369 event: "update-uniforms" 370 })), 371 this.animGroup.addKeyframe(i, r(r({}, this.baseKeyframes), {}, { 372 start: "".concat(this.baseKeyframes.start, " + 10vh"), 373 end: "".concat(this.baseKeyframes.end, " - ").concat(n), 374 uOpacity: [null, i.material.uniforms.uOpacity.end], 375 event: "update-uniforms" 376 })), 377 this.animGroup.addKeyframe(i, r(r({}, this.baseKeyframes), {}, { 378 start: "".concat(this.baseKeyframes.end, " - ").concat(n), 379 uOpacity: [null, 0], 380 event: "update-uniforms" 381 })) 382 } 383 return this._animateUniforms(i), 384 a 385 } 386 387 Digital.prototype._loadImage = function(e, t) { 388 return new Promise((i,s)=>{ 389 e.complete ? (e.addEventListener("load", ()=>{ 390 this.textureOptions[t].image && (this.textureOptions[t].image.src = e.currentSrc, 391 this.textureOptions[t].needsUpdate = !0, 392 this._render()) 393 } 394 ), 395 i(e)) : e.onload = ()=>i(e), 396 e.onerror = s 397 } 398 ) 399 } 400 401 Digital.prototype._resizeMatrixVertices = function() { 402 var self = window.Digital; 403 let e = .5 * Math.max(self.stickyWidth, self.stickyHeight);
404 Object.keys(self.layers).map(function(t){ 405 let i = self.layers[t].mesh.geometry.getAttribute("position") 406 , s = i.array 407 , n = "hardware" !== t ? e * self.screenSize : e; 408 s[0] = -n, 409 s[1] = n, 410 s[3] = n, 411 s[4] = n, 412 s[6] = -n, 413 s[7] = -n, 414 s[9] = n, 415 s[10] = -n, 416 i.needsUpdate = !0 417 } 418 ) 419 } 420 Digital.prototype._updateMatrix = function() { 421 var self = window.Digital; 422 self.camera.fov = 2 * Math.atan(self.stickyHeight / 2 / self.perspective) * (180 / Math.PI), 423 self.camera.aspect = self.stickyWidth / self.stickyHeight, 424 self.camera.updateProjectionMatrix(), 425 self.renderer.setSize(self.stickyWidth, self.stickyHeight) 426 } 427 // Digital.prototype._updateScaleAnim = function() { 428 // this.sceneScaleAnim.overwriteProps({ 429 // uScale: [1, "(css(--scene-size) / ".concat(Math.max(this.stickyWidth, this.stickyHeight), ")")] 430 // }) 431 // } 432 Digital.prototype._render = function() { 433 this.renderer.render(this.scene, this.camera) 434 } 435 // _destroy() {} 436 Digital.prototype.onResizeDebounced = function(e) { 437 if(window.THREE) { 438 var self = window.Digital; 439 self.stickyWidth = $(window).width(), 440 self.stickyHeight = $(window).height(), 441 self.camera.aspect = self.stickyWidth / self.stickyHeight; 442 self.renderer.setSize(self.stickyWidth, self.stickyHeight); 443 // self._resizeMatrixVertices.bind(self)() 444 self._updateMatrix.bind(self)(); 445 446 var self = self; 447 for (var index = 0; index < self.scenes.length; index++) { 448 self.scenes[index].destroy(true); 449 } 450 self.scenes = []; 451 Object.keys(self.layers).map(function(t){ 452 self._layerKeyframeMaker(self.layers[t]); 453 }); 454 self._sceneScaler(); 455 456 457 self._render(); 458 setTimeout(function() { 459 self._render(); 460 }, 1000); 461 } 462 463 } 464 // static IS_SUPPORTED() { 465 // return document.documentElement.classList.contains("enhanced") 466 // } 467 468 return Digital; 469}())(); 470 471 472 473function e(id, el) { 474 var functions = { 475 166: [function () { 476 "use strict"; 477 478 return { 479 material: { 480 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tvec4 color = texture2DGradEXT(uTexture, vUv, dFdx(vUv), dFdy(vUv));\n\t\t\tgl_FragColor = color;\n\t\t}\n\t"].join("\n"), 481 uniforms: { 482 uTexture: { 483 value: el.textureOptions.HARDWARE_TEXTURE 484 }, 485 uZPosition: { 486 name: "Z position", 487 value: 700, 488 start: 700, 489 end: 1.5 490 } 491 } 492 } 493 } 494 } 495 , { 496 173: 173 497 }], 498 167: [function () { 499 "use strict"; 500 501 return { 502 layers: { 503 // hardware: e(166, el).bind(this)(), 504 layer0: e(168, el).bind(this)(), 505 layer1: e(169, el).bind(this)(), 506 layer2: e(170, el).bind(this)(), 507 layer3: e(171, el).bind(this)(), 508 layer4: e(172, el).bind(this)() 509 }, 510 shaderConstants: e(173, el).bind(this)() 511 } 512 } 513 , { 514 166: 166, 515 168: 168, 516 169: 169, 517 170: 170, 518 171: 171, 519 172: 172, 520 173: 173 521 }], 522 168: [function () { 523 "use strict"; 524 525 return { 526 material: { 527 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tvec3 color = texture2DGradEXT(uTexture, vUv, dFdx(vUv), dFdy(vUv)).rgb;\n\t\t\tgl_FragColor = vec4(color, uOpacity);\n\t\t}\n\t"].join("\n"), 528 uniforms: { 529 uTexture: { 530 value: el.textureOptions.ENDFRAME_TEXTURE 531 }, 532 uZPosition: { 533 name: "Z position", 534 value: 100, 535 start: 100, 536 end: 1 537 }, 538 uOpacity: { 539 name: "Opacity", 540 value: 0, 541 start: 0, 542 end: 1 543 } 544 } 545 } 546 } 547 } 548 , { 549 173: 173 550 }], 551 169: [function () { 552 "use strict"; 553 554 return { 555 material: { 556 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tfloat N = uDotCount;\n\t\t\tvec2 center = vec2(0.5);\n\t\t\tvec2 dxy = vec2(1.0 / N);\n\t\t\tvec2 textureUv = (dxy * floor(vUv / dxy)) + (dxy * 0.5);\n\t\t\tvec2 pt = fract(vUv / dxy) - center;\n\n\t\t\tvec4 tex = texture2DGradEXT(uTexture, textureUv, dFdx(textureUv), dFdy(textureUv));\n\n\t\t\t// set base color of bordered squircle\n\t\t\tvec4 color = vec4(uStartColor, uOpacity);\n\n\t\t\t// bordered squircle\n\t\t\tcolor *= borderedSquircle(vec2(pt), vec2(uDotSize), uDotRadius, uDotThickness, 0.0);\n\n\t\t\t// glow\n\t\t\tcolor += tex * borderedSquircle(vec2(pt), vec2(uGlowSize), uGlowRadius, uGlowThickness, uGlowBlend);\n\n\t\t\tgl_FragColor = color * uOpacity;\n\t\t}\n\t"].join("\n"), 557 uniforms: { 558 uStartColor: { 559 value: new el.THREE.Color("#26a5ff") 560 }, 561 uTexture: { 562 value: el.textureOptions.POSTERFRAME_TEXTURE 563 }, 564 uDotCount: { 565 value: 104 * el.dotMultiple 566 }, 567 uDotSize: { 568 value: .26 569 }, 570 uDotRadius: { 571 value: .09 572 }, 573 uDotThickness: { 574 value: .09 575 }, 576 uGlowSize: { 577 value: .2 578 }, 579 uGlowRadius: { 580 value: .14 581 }, 582 uGlowThickness: { 583 value: .28 584 }, 585 uGlowBlend: { 586 value: .36 587 }, 588 uZPosition: { 589 value: 1, 590 start: 1, 591 end: 1 592 }, 593 uOpacity: { 594 value: 1, 595 start: 1, 596 end: 0 597 } 598 } 599 } 600 } 601 } 602 , { 603 173: 173 604 }], 605 170: [function () { 606 "use strict"; 607 608 return { 609 material: { 610 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tfloat N = uDotCount;\n\t\t\tvec2 center = vec2(0.5);\n\t\t\tvec2 dxy = vec2(1.0 / N);\n\t\t\tvec2 textureUv = (dxy * floor(vUv / dxy)) + (dxy * 0.5);\n\t\t\tvec2 pt = fract(vUv / dxy) - center;\n\n\t\t\tvec2 ipos = floor(textureUv);\n\t\t\tvec2 fpos = fract(textureUv);\n\t\t\tvec2 tile = randomSize(fpos, random(ipos));\n\t\t\tfloat variance = clamp(random(tile), 0.0, uVariance);\n\n\t\t\tvec4 color = texture2DGradEXT(uTexture, textureUv, dFdx(textureUv), dFdy(textureUv));\n\t\t\tcolor *= circle(vec2(pt), uDotSize, uDotBlend, variance);\n\n\t\t\tgl_FragColor = color * uOpacity;\n\t\t}\n\t"].join("\n"), 611 uniforms: { 612 uTexture: { 613 value: el.textureOptions.POSTERFRAME_TEXTURE 614 }, 615 uDotCount: { 616 value: 460 * el.dotMultiple 617 }, 618 uDotSize: { 619 value: .34 620 }, 621 uDotBlend: { 622 value: .1 623 }, 624 uVariance: { 625 value: .08 626 }, 627 uZPosition: { 628 value: 200, 629 start: 200, 630 end: 1 631 }, 632 uOpacity: { 633 value: 1, 634 start: 1, 635 end: 0 636 } 637 } 638 } 639 } 640 } 641 , { 642 173: 173 643 }], 644 171: [function () { 645 "use strict"; 646 647 return { 648 material: { 649 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tfloat N = uDotCount;\n\t\t\tvec2 center = vec2(0.5);\n\t\t\tvec2 dxy = vec2(1.0 / N);\n\t\t\tvec2 textureUv = (dxy * floor(vUv / dxy)) + (dxy * 0.5);\n\t\t\tvec2 pt = fract(vUv / dxy) - center;\n\n\t\t\tvec2 ipos = floor(textureUv);\n\t\t\tvec2 fpos = fract(textureUv);\n\t\t\tvec2 tile = randomSize(fpos, random(ipos));\n\t\t\tfloat variance = clamp(random(tile), 0.0, uVariance);\n\n\t\t\tvec4 color = texture2DGradEXT(uTexture, textureUv, dFdx(textureUv), dFdy(textureUv));\n\t\t\tcolor *= circle(vec2(pt), uDotSize, uDotBlend, variance);\n\n\t\t\tgl_FragColor = color * uOpacity;\n\t\t}\n\t"].join("\n"), 650 uniforms: { 651 uTexture: { 652 value: el.textureOptions.POSTERFRAME_TEXTURE 653 }, 654 uDotCount: { 655 value: 311 * el.dotMultiple 656 }, 657 uDotSize: { 658 value: .35 659 }, 660 uDotBlend: { 661 value: .08 662 }, 663 uVariance: { 664 value: .03 665 }, 666 uZPosition: { 667 value: 350, 668 start: 350, 669 end: 1 670 }, 671 uOpacity: { 672 value: 1, 673 start: 1, 674 end: 0 675 } 676 } 677 } 678 } 679 } 680 , { 681 173: 173 682 }], 683 172: [function () { 684 "use strict"; 685 686 return { 687 material: { 688 fragmentShader: [e(173, el).bind(this)().frag, "\n\t\tvoid main() {\n\t\t\tfloat N = uDotCount;\n\t\t\tvec2 center = vec2(0.5);\n\t\t\tvec2 dxy = vec2(1.0 / N);\n\t\t\tvec2 textureUv = (dxy * floor(vUv / dxy)) + (dxy * 0.5);\n\t\t\tvec2 pt = fract(vUv / dxy) - center;\n\n\t\t\tvec2 ipos = floor(textureUv);\n\t\t\tvec2 fpos = fract(textureUv);\n\t\t\tvec2 tile = randomSize(fpos, random(ipos));\n\t\t\tfloat variance = clamp(random(tile), 0.0, uVariance);\n\n\t\t\tvec4 color = texture2DGradEXT(uTexture, textureUv, dFdx(textureUv), dFdy(textureUv));\n\t\t\tcolor *= circle(vec2(pt), uDotSize, uDotBlend, variance);\n\n\t\t\tgl_FragColor = color * uOpacity;\n\t\t}\n\t"].join("\n"), 689 uniforms: { 690 uTexture: { 691 value: el.textureOptions.POSTERFRAME_TEXTURE 692 }, 693 uDotCount: { 694 value: 210 * el.dotMultiple 695 }, 696 uDotSize: { 697 value: .54 698 }, 699 uDotBlend: { 700 value: .49 701 }, 702 uVariance: { 703 value: 0 704 }, 705 uZPosition: { 706 value: 400, 707 start: 400, 708 end: 1 709 }, 710 uOpacity: { 711 value: 1, 712 start: 1, 713 end: 0 714 } 715 } 716 } 717 } 718 } 719 , { 720 173: 173 721 }], 722 173: [function () { 723 "use strict"; 724 return { 725 vert: "\n\t\tvarying vec2 vUv;\n\t\tvoid main() {\n\t\t\tvUv = uv;\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\t\t}\n\t", 726 frag: "\n\t\tuniform sampler2D uTexture;\n\t\tuniform vec3 uStartColor;
726\n\t\tuniform float uDotCount;\n\t\tuniform float uDotBlend;\n\t\tuniform float uDotSize;\n\t\tuniform float uOpacity;\n\t\tuniform float uVariance;\n\t\tuniform float uDotRadius;\n\t\tuniform float uDotThickness;\n\t\tuniform float uGlowSize;\n\t\tuniform float uGlowRadius;\n\t\tuniform float uGlowThickness;\n\t\tuniform float uGlowBlend;\n\n\t\tvarying vec2 vUv;\n\n\t\tfloat borderedSquircle(vec2 pos, vec2 size, float radius, float thickness, float blend) {\n\t\t\tfloat d = length(max(abs(pos), size) - size) - radius;\n\t\t\treturn smoothstep(0.55, 0.51 - blend, abs(d / thickness));\n\t\t}\n\n\t\tfloat random(in vec2 pt) {\n\t\t\treturn fract(sin(dot(pt.xy,vec2(12.9898,78.233)))*43758.5453123);\n\t\t}\n\n\t\tvec2 randomSize(in vec2 pt, in float i) {\n\t\t\ti = fract(i * 2.0);\n\n\t\t\tif (i > 0.5) { pt = vec2(1.0) - pt; }\n\t\t\telse { pt = vec2(1.0 - pt.x, pt.y); }\n\n\t\t\treturn pt;\n\t\t}\n\n\t\tfloat circle(vec2 pt, float size, float blend, float variance) {\n\t\t\tfloat len = length(pt);\n\t\t\tfloat result = 1.0 - smoothstep((size - variance) - blend, (size - variance), len);\n\n\t\t\treturn result;\n\t\t}\n\t" 727 } 728 } 729 , {}], 730 731 28: [function(e, t, i) { 732 return t in e ? Object.defineProperty(e, t, { 733 value: i, 734 enumerable: !0, 735 configurable: !0, 736 writable: !0 737 }) : e[t] = i, 738 e 739 } 740 , {}], 741 29: [function(e, t, i) { 742 return e && e.__esModule ? e : { 743 default: e 744 } 745 } 746 , {}], 747 } 748 749 return functions[id][0]; 750} 751 752 753 754var s = e(29)(e(28)); 755function n(e, t) { 756 // var s = []; 757 var i = Object.keys(e); 758 if (Object.getOwnPropertySymbols) { 759 var s = Object.getOwnPropertySymbols(e); 760 t && (s = s.filter((function(t) { 761 return Object.getOwnPropertyDescriptor(e, t).enumerable 762 } 763 ))), 764 i.push.apply(i, s) 765 } 766 return i 767} 768 769// what is this? 770function r(e) { 771 for (var t = 1; t < arguments.length; t++) { 772 var i = null != arguments[t] ? arguments[t] : {}; 773 t % 2 ? n(Object(i), !0).forEach((function(t) { 774 (0, 775 s.default)(e, t, i[t]) 776 } 777 )) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(i)) : n(Object(i)).forEach((function(t) { 778 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(i, t)) 779 } 780 )) 781 } 782 return e 783} 784class Mesh { 785 constructor(e) { 786 this.id = e.id, 787 this.el = e.el, 788 this.THREE = e.THREE, 789 this.material = e.material, 790 this.stickyWidth = e.stickyWidth, 791 this.stickyHeight = e.stickyHeight, 792 this.matrixContainer = this.el.querySelector(".experience-display-matrix"), 793 this.stickyOverflow = this.el.querySelector(".sticky-overflow"), 794 // this.screenSize = parseFloat(getComputedStyle(this.matrixContainer).getPropertyValue("--screen-to-hardware-ratio")), 795 this.screenSize = 1, 796 // this.screenOffsetX = parseFloat(getComputedStyle(this.matrixContainer).getPropertyValue("--screen-offset-x")), 797 // this.screenOffsetY = parseFloat(getComputedStyle(this.matrixContainer).getPropertyValue("--screen-offset-y")); 798 this.screenOffsetX = 0, 799 this.screenOffsetY = 0; 800 this.mesh = this._createMesh(); 801 } 802 803 _createMesh() { 804 let t, i, s = new this.THREE.ShaderMaterial(r(r({}, this.material), {}, { 805 vertexShader: e(173, this)().vert, 806 opacity: 0, 807 transparent: !0, 808 blending: "hardware" === this.id ? this.THREE.NormalBlending : this.THREE.AdditiveBlending 809 })); 810 s.extensions.derivatives = !0, 811 s.extensions.shaderTextureLOD = !0; 812 let n = Math.max(this.stickyWidth, this.stickyHeight); 813 switch (this.id) { 814 case "hardware": 815 t = new this.THREE.PlaneBufferGeometry(n,n,1,1), 816 i = new this.THREE.Mesh(t,s); 817 break; 818 case "layer0": 819 case "layer2": 820 case "layer3": 821 case "layer4": 822 // 1920, 1080 823 // t = new this.THREE.PlaneBufferGeometry(this.stickyWidth,this.stickyHeight,1,1); 824 var width = this.stickyWidth; 825 var height = this.stickyWidth / 16 * 9; 826 t = new this.THREE.PlaneBufferGeometry(width,height,1,1); 827 i = new this.THREE.Mesh(t,s); 828 i.position.x = this.screenOffsetX; 829 i.position.y = this.screenOffsetY; 830 break; 831 default: 832 t = new this.THREE.PlaneBufferGeometry(n * this.screenSize,n * this.screenSize,1,1), 833 i = new this.THREE.Mesh(t,s), 834 i.position.x = this.screenOffsetX, 835 i.position.y = this.screenOffsetY; 836 break; 837 } 838 return i.position.z = s.uniforms.uZPosition.value, 839 i 840 } 841}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.