Hi, this is the Technocracy blog. Usually we do digital business transformation, but today we have for you the history of how to use the library and three.js shaders we did Landing for our promotional campaign. The main storyteller is our developer Artem .
At the start
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . Figma , .
, , . , .
3D- —
. , , . 3D- .
, , . - — . . PNG, . 3D three.js.
, , . : , , . , , .
— , . , .
Three.js:
Bloom ( );
Film ;
Glitch ;
? HTML, WebGL. : , .
: CSS. , .
. , . , , - .
-:
, , , . , : , , , .
. — .
, GLSL, . ? . 1 64. . « » . .
, , « » CPU GPU:
three.js?
. . 4 — 4 . 3D- 2D . , , . (, ).
— , three.js.
- . . , , .
, . FullHD 2 .
, . ( 0 1) . — .
: — , — . , .
3D-, . , . .
3D-max — . , . . , , .
, RGB .
— , .
, . , , , , R. Y G, . , , , .
? . 3D- , , .
: , — . . , .
?
:
UV , , . .
. : .
, ,
, , .
uniforms ( ), X Y ( / ) .
— COVID-19 . 3D max — . , , . , . !
Usually we write everything in typescript, but in this case we don't really need type checking, so we decided to write in pure JS. In order not to bother with the assembly, we used parcel - it helped us import HTML into each other without configuration (which is convenient when there is a lot of content on the page) and use Stylus for styles.
All the rest
In order not to spend a lot of time on animation, we used animate.css. Also some effects were taken from codepen.
Let's leave useful links instead of output.
Threejs Basics Interactive Book
Excellent course on shaders in GLSL