Zlece wyklonanie eksperymentu programistycznego WebGL+WebSocket

Zlece wyklonanie eksperymentu programistycznego WebGL+WebSocket
Marius.Maximus
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 9 godzin
  • Postów:2070
0

Zastanawiam się czy rozważyć aplikację webową jako alternatywna propozycje dla użytkowników , zastanawiam się ile technologia JS "wyciagnie" na sekundę ;)

zlecę wykonanie aplikacja JS , może być czysty Vanila.JS albo VUE.JS,

Kopiuj
int w{256}
int h{512}
while(1)
{
  pobierz_z_webocket(w,h); // pobieram x*h Bajtów 
  wypelnij_teksture(w,h);    // w i h to wymiary tekstury  
  
  // np. 6 wierzchołków (x,y,u,v)  [30,100,0,0] [30,300,0,1] [130,50,0.5,0] [130,350,0.5,1] [230,100,1,0] [230,100,1,1] 
  narysuj_wierzcholki(....);   
  // tekstura jest U8 (8bitów bez znaku) , rysujemy tylko odcienie szarości, kanał A , albo RGB te same wartości  
  
  policz_i_narysuj_ilosc_klatek_na_sekunde();
}

Nie potrzebuje żadnego GUI , przycisków , styli itp., chodzi mi o przeprowadzenie eksperymentu polegającym na wyświetleniu danych i policzeniu ile wyjdzie klatek/s


--
Nie przyjmuję reklamacji za moje rady, używasz na własną odpowiedzialność.
Programowanie bez formatowania to jak chodzenie ze spodniami spuszczonymi na kostki. Owszem da się ale po pierwsze nie wygodne, po drugie nieprzyzwoicie wygląda.
Przed zaczęciem nowego wątku przeczytam problem XY
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 13 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10056
1

Nie chce mi się tego robić, ale FPS pewnie liczony w tysiącach.

Lepiej wpisz w google "webgl performance test" albo "webgl benchmark" i będziesz miał odpowiedź. Bez sensu to pisać samemu.

edytowany 1x, ostatnio: Riddle
Marius.Maximus
w tysiacach to na pewne nie, bo trzeba jeszcze odebrać dane z websocket, wszystko co widziałem jest na statycznych danych,, ja bym chciał zobaczyć jak to działa przy strumieniu danych 60 klatkach 512x256 ,jak to ogarnie JS i ile CPU/GPU to pochłonie
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 2 godziny
  • Postów:8409
4
Adamek Adam napisał(a):

technologia JS

Jak rozumiem z przykładowego kodu chodzi o grafikę 3D? To takie rzeczy robi się zwykle tak, że pisze się je w WebGL (zwykle używając jakiejś biblioteki typu Three.js czy Babylon.js) i w JS tworzy się obiekty, ale pod spodem przesyła się je do karty graficznej, gdzie się wykonuje duża część obliczeń. Więc de facto to przestaje być do końca tylko JS.

Zastanawiam się czy rozważyć aplikację webową jako alternatywna propozycje dla użytkowników , zastanawiam się ile technologia JS "wyciagnie" na sekundę ;)

Jeżeli patrzysz biznesowo, to nie tylko technologia jest ważna. Bo jeśliby zrobić już nie prosty benchmark, tylko faktyczną aplikację produkcyjną, to okaże się, że ważne są też:

  • umiejętności danego programisty w zakresie optymalizacji i grafiki 3D. A czasem nawet drobne zmiany potrafią robić różnice. Np. powiedzmy, że mamy do wyświetlenia 1000 takich samych obiektów, to możemy wyświetlić je po kolei (co będzie wolne), a możemy użyć tzw. "instancingu" i wyświetlić wszystkie za jednym zamachem i będzie o wiele szybciej. Ale wpierw trzeba wiedzieć, że tak można.
  • czas na to, żeby dokonać potrzebnych optymalizacji (napięte deadline'y sprzyjają wrzucaniu czegoś niezoptymalizowanego)
  • sam design aplikacji np. wyobraźmy sobie dwie sytuacje
    • apka będzie pobierać i wyświetlać modele z bardzo dużą liczbą wierzchołków z fotorealistycznymi materiałami, a sceny będą przeciążone animacjami, dynamicznymi cieniami itp. itd. Czyli sama apka będzie wymagająca.
    • apka będzie wyświetlać prostą i w większości statyczną grafikę 3D, modele będą low-poly, animacji nie będzie wiele itp. Czyli sam design będzie miał małe wymagania.
  • urządzenia, na których będzie ta apka odpalana (jak to do masowego konsumenta będzie, to nigdy nie wiesz, na czym ktoś to odpali).

I ogólnie mam wrażenie, że większość webowych apek 3D zamula z ww. powodów (słabe skille programisty, niechlujność, przeciążony design, nieprzystosowanie do słabszych urządzeń), nawet jeśli sama technologia pozwala na więcej.


edytowany 4x, ostatnio: LukeJL
Marius.Maximus
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 9 godzin
  • Postów:2070
0

dwa razy łapka w gorę za podanie nazw dwóch technologi w których można rysować 3D , jadna łapka w dół że nie chesz tego zrobić , per saldo: łapka w górę :) A tak serio to dziękuje za komentarz

ale pod spodem przesyła się je do karty graficznej, gdzie się wykonuje duża część obliczeń. Więc de facto to przestaje być do końca tylko JS

Możesz to rozwinąć ? Masz na myśli proces po stronie klienta który pobiera dane i aktualizuje pamięć tekstury i JS nie musi zajmować się duza iloscia danych
(z racji ze to nie jest w przeglądarce to moze byc soket a nie webSocket ?) ? Czy to wtedy nie jest ściśle związane z klientem i raczej nie zadziała w przeglądarce ?


--
Nie przyjmuję reklamacji za moje rady, używasz na własną odpowiedzialność.
Programowanie bez formatowania to jak chodzenie ze spodniami spuszczonymi na kostki. Owszem da się ale po pierwsze nie wygodne, po drugie nieprzyzwoicie wygląda.
Przed zaczęciem nowego wątku przeczytam problem XY
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 2 godziny
  • Postów:8409
1
Adamek Adam napisał(a):

Możesz to rozwinąć ? Masz na myśli proces po stronie klienta który pobiera dane i aktualizuje pamięć tekstury i JS nie musi zajmować się duza iloscia danych
(z racji ze to nie jest w przeglądarce to moze byc soket a nie webSocket ?) ? Czy to wtedy nie jest ściśle związane z klientem i raczej nie zadziała w przeglądarce ?

Sockety nie mają nic do tego.

Masz przeglądarkę (Chrome, Firefox itp.), która osadza silnik JSa. Jednak w przyśpieszono sprzętowej grafice JS nie liczy każdego piksela (mógłby, ale byłby to software rendering i zwykle byłoby to wolniejsze), tylko przekazuje dane o współrzędnych wierzchołków, dane macierzy czy tekstur przez WebGL do karty graficznej i dopiero tam się to liczy w pełnej krasie (można to customizować za pomocą shaderów - małych programów obsługiwanych przez kartę graficzną. WebGL obsługuje język GLSL do pisania shaderów).

I dopóki odpalasz JS w przeglądarce, to wychodzi na jedno - piszesz coś w JS i się wyświetla. Co nie zmienia tego, że nie jest to czysty JS. A pisałeś, że chcesz przetestować ile technologia JS "wyciagnie" na sekundę, a żeby to przetestować (faktycznie ocenić szybkość wywoływania JSa), to trzeba byłoby napisać jako software renderer (co by miało sens do samego benchmarku, ale już niekoniecznie na produkcję)

(z racji ze to nie jest w przeglądarce

W sensie gdzie chcesz tego JSa odpalić?
WebGL jest akurat w przeglądarkowym JSie (mimo, że samego JSa można odpalić również poza przeglądarką)


edytowany 2x, ostatnio: LukeJL
Marius.Maximus
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 9 godzin
  • Postów:2070
0

Na początek to bym się zadowolił uruchomieniem na przeglądarce chrome.

Znalazłem taki przykład gdzie WebGL używa video jako tekstury
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL

pozostaje poczytać o websocket i spróbować samemu zakasać rękawy i podmienić teksture video na strumien danych


--
Nie przyjmuję reklamacji za moje rady, używasz na własną odpowiedzialność.
Programowanie bez formatowania to jak chodzenie ze spodniami spuszczonymi na kostki. Owszem da się ale po pierwsze nie wygodne, po drugie nieprzyzwoicie wygląda.
Przed zaczęciem nowego wątku przeczytam problem XY
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)