Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: vesterna12 11. 12. 2023, 23:28:47

Název: Grafika jako na webu Threads
Přispěvatel: vesterna12 11. 12. 2023, 23:28:47

Mohl by nekdo nastinit jak se dela grafika jako je na pozadi webu

Kód: [Vybrat]

https://www.threads.net/ ?
Presne jake nastroje se na neco takoveho pouzivaji? Pripadne jak / s cim zacit pro dosazeni nejakeho podobneho cile?

Název: Re:grafika webu Threads
Přispěvatel: alex6bbc 11. 12. 2023, 23:43:55

nejjednodussi bude html5 canvar a graficke primitivy body, usecky apod.

Název: Re:grafika webu Threads
Přispěvatel: honzik1111 12. 12. 2023, 00:22:34

Mnohem jednodušší je se podívat do zdrojáku té stránky:

<canvas data-engine="three.js r138" width="1920" height="700" style="display: block; width: 1920px; height: 700px; touch-action: none;"></canvas>

Takže zřejmě něco s three.js

Zadal jsem do vyhledávače "three.js rotating galaxy" a pár prvních odkazů:
https://codepen.io/aderaaij/pen/oNBWEWv
https://www.flowradar.com/cloneables/3d-spiral-galaxy-three-js

Název: Re:grafika webu Threads
Přispěvatel: alex6bbc 12. 12. 2023, 05:08:15

jak to vypada tak to jsou body natvrdo umistene a jen se muze rotovat celek.
zajimavejsi by byla gravitacni simulace mnoha planet a hvezd jako bodu v galaxii.

Název: Re:grafika webu Threads
Přispěvatel: Tomas-T 12. 12. 2023, 08:09:51

To je zvláštní, já tam vidím ještě daleko primitivnější postup.
Jeden JPG obrázek:
  <img class="xl1xv1r xmbpmic xa4qsjk x1sy8xo6 x1esw782 xa748i3 x1kwqm5x x1c3suxw xacczz4 x1aquc0h" rsrc="https://static.cdninstagram.com/rsrc.php/v1/yn/r/VPVicVYbRpx.jpg">
A k němu definice animace rotace v CSS:
  .xmbpmic { animation-duration: 300s }
  .xa4qsjk { animation-iteration-count: infinite }
  .x1esw782 { animation-timing-function: linear }
  .x1sy8xo6 { animation-name: x14jnwpq-B }
  @keyframes x14jnwpq-B { from { transform: rotate(0) } to { transform: rotate(360deg) } }

Název: Re:grafika webu Threads
Přispěvatel: honzik1111 12. 12. 2023, 08:17:28

Citace: Tomas-T  12. 12. 2023, 08:09:51

To je zvláštní, já tam vidím ještě daleko primitivnější postup.
Jeden JPG obrázek:

Podle mých pozorování se tenhle zjednodušený přístup použije na mobilu.
V desktopovém prohlížeči se mi zobrazuje 3D animace.

Název: Re:grafika webu Threads
Přispěvatel: user398 12. 12. 2023, 09:41:12

Aby som to este spresnil - na desktopovom Firefoxe je to rotujuci 2d obrazok, v Chrome je to 3D priestorove a je moze s tym hybat.
Zas diskriminace FF  :-\

Název: Re:grafika webu Threads
Přispěvatel: L.. 12. 12. 2023, 09:53:24

Citace: user398  12. 12. 2023, 09:41:12

Aby som to este spresnil - na desktopovom Firefoxe je to rotujuci 2d obrazok, v Chrome je to 3D priestorove a je moze s tym hybat.
Zas diskriminace FF  :-\

A není to tím, že FF prostě potřebnou technologii nepodporuje?

Název: Re:Grafika jako na webu Threads
Přispěvatel: czipis 12. 12. 2023, 10:35:11

spis je to jenom omezeni od vyvojare konkretniho webu. ty dalsi odkazovane priklady ve FF funguji.
dokonce jsem vyzkousel, ze staci na Linux FF zmenit user-agent na Chrome a taky to zobrazi tu 3D verzi.

Název: Re:Grafika jako na webu Threads
Přispěvatel: ZAJDAN 12. 12. 2023, 10:55:30

WebGL
https://www.khronos.org/webgl/ (https://www.khronos.org/webgl/)