# How did they do that?

**URL:** https://discourse.threejs.org/t/how-did-they-do-that/2829
**Category:** Questions
**Tags:** webgl-renderer, shaders
**Created:** [May 14, 2018, 9:08am UTC](https://discourse.threejs.org/t/how-did-they-do-that/2829 "2018-05-14T09:08:02Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![ChristianHoper](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/christianhoper/32/1789_2.png) [@ChristianHoper](https://discourse.threejs.org/u/ChristianHoper)
#### Post date: [May 14, 2018, 9:08am UTC](https://discourse.threejs.org/t/how-did-they-do-that/2829/1 "2018-05-14T09:08:03Z")

</div>

> **[Home Page - HPSNZ](https://hpsnz.org.nz/)**
>
> Powering over 600 of New Zealand’s elite athletes and coaches.

The video in the background seems to be processed on the fly by some sort of webgl plug in (shader?).

I’m not that up on this but could anyone tell me how its done?

Cheers : )

---

<div class="post-metadata">

### Author: ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)
#### Post date: [May 14, 2018, 10:54am UTC](https://discourse.threejs.org/t/how-did-they-do-that/2829/2 "2018-05-14T10:54:29Z")

</div>

According to the code, it’s a custom shader material rendering the cross-texture. You could look at the code to see how it’s implemented. It’s in the main js on the very bottom.

Even though it seems they treeshaked THREE to 200kb (what is basically fine, since a full HD image header would be around this as well) the site is rather overloaded, it tooks 51 seconds to finish with 17.4MB for the frontpage.

---

<div class="post-metadata">

### Author: ![ChristianHoper](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/christianhoper/32/1789_2.png) [@ChristianHoper](https://discourse.threejs.org/u/ChristianHoper)
#### Post date: [May 14, 2018, 11:09am UTC](https://discourse.threejs.org/t/how-did-they-do-that/2829/3 "2018-05-14T11:09:12Z")

</div>

Thank you so much for the info. I agree that does sound heavy! Cheers Chris : )
