Grafika jako na webu Threads

[vesterna12]

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

Kód [Vybrat] Rozbalit

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

[Reklama]

[alex6bbc]

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

[honzik1111]

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

[alex6bbc]

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.

[Tomas-T]

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) } }

[Reklama]

[honzik1111]

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.

[user398]

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 

[L..]

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?

[czipis]

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.

[ZAJDAN]

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