Hallo, das ist der Technocracy-Blog. Normalerweise machen wir digitale Business - Transformation, aber heute haben wir für Sie die Geschichte , wie die Bibliothek und three.js Shadern verwenden wir haben Landing für unsere Werbekampagne. Der Hauptstoryteller ist unser Entwickler Artem .
Am Anfang
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . 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 — . , , . , . !
Normalerweise schreiben wir alles in Typoskript, aber in diesem Fall brauchen wir keine Typprüfung, also haben wir uns entschieden, in reinem JS zu schreiben. Um die Assembly nicht zu stören, haben wir Paket verwendet - es hat uns geholfen, HTML ohne Konfiguration ineinander zu importieren (was praktisch ist, wenn die Seite viel Inhalt enthält) und Stylus für Stile zu verwenden.
Alles andere
Um nicht viel Zeit mit Animation zu verbringen, haben wir animate.css verwendet. Auch einige Effekte wurden aus dem Codepen übernommen.
Lassen wir nützliche Links statt Ausgabe.
Beispiele für Arbeiten in drei Jahren
Threejs Basics Interaktives Buch
Hervorragender Kurs über Shader in GLSL