Grafika jako na webu Threads

vesterna12

  • ***
  • 123
  • byrokracie zabíjí kreativitu
    • Zobrazit profil
    • E-mail
Grafika jako na webu Threads
« kdy: 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?
« Poslední změna: 12. 12. 2023, 10:07:28 od Petr Krčmář »


alex6bbc

  • *****
  • 1 537
    • Zobrazit profil
    • E-mail
Re:grafika webu Threads
« Odpověď #1 kdy: 11. 12. 2023, 23:43:55 »
nejjednodussi bude html5 canvar a graficke primitivy body, usecky apod.

Re:grafika webu Threads
« Odpověď #2 kdy: 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

alex6bbc

  • *****
  • 1 537
    • Zobrazit profil
    • E-mail
Re:grafika webu Threads
« Odpověď #3 kdy: 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.

Re:grafika webu Threads
« Odpověď #4 kdy: 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) } }


Re:grafika webu Threads
« Odpověď #5 kdy: 12. 12. 2023, 08:17:28 »
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.

Re:grafika webu Threads
« Odpověď #6 kdy: 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  :-\

L..

  • ****
  • 309
    • Zobrazit profil
    • E-mail
Re:grafika webu Threads
« Odpověď #7 kdy: 12. 12. 2023, 09:53:24 »
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

  • ***
  • 233
    • Zobrazit profil
    • E-mail
Re:Grafika jako na webu Threads
« Odpověď #8 kdy: 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.

ZAJDAN

  • *****
  • 2 083
    • Zobrazit profil
    • E-mail
Re:Grafika jako na webu Threads
« Odpověď #9 kdy: 12. 12. 2023, 10:55:30 »
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.