WebGL Three.js - bezpieczeństwo kodu

WebGL Three.js - bezpieczeństwo kodu
0

Witam,
chcę napisać na podstawie WebGL wyświetlanie wektorów z zaimportowanego pliku. Przykładowo na wejściu mam tablicę wektorów (wartości x1,y1 i x2,y2).

I teraz chcę narysować to w 2D przy pomocy WebGL. I tutaj pojawia się pierwsze pytanie:
Lepiej użyć WebGL czy Three.js (wiem, że Three.js zawiera WebGL, ale chodzi o łatwość wyświetlania 2D)?

Drugie pytanie brzmi:
Czy można ukraść źródło takiej strony? (wiem, że jest to minifikowane, ale muszę mieć pewność, że nikt tego nie skopiuje by użyć u siebie lub "rozczytać kod")

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:3 minuty
  • Postów:8411
1

Lepiej użyć WebGL czy Three.js (wiem, że Three.js zawiera WebGL, ale chodzi o łatwość wyświetlania 2D)?

W czystym WebGL bez problemu możesz wyświetlać 2D. Nawet łatwiej 2D niż 3D bo odchodzą te wszystkie macierze projekcji, kamery itp... Problemem może być co najwyżej to, że interfejs WebGL jest dośc niskopoziomowy, i na początku może być trudno pojąć pewne koncepcje (no i dochodzi pisanie shaderów), czy nawet napisać poprawnie kod od zera.

ThreeJS jest wygodniejszy w obsłudze i łatwy. Nie wiem natomiast czy jest jakieś specjalne wsparcie do 2D w ThreeJS (ale na upartego przecież mogłbyś potraktować punkty 2D jako punkty w 3D, które leżą na płaszczyźnie prostopadłej do kamery... ).

Poza tym, jeśli to 2D to możesz również skorzystać z innych rzeczy, np. biblioteka Pixi, która też ma wsparcie WebGL (z automatu, nie musisz o tym myśleć).

Albo rysować to na zwykłym Canvasie w kontekście 2D (bez przyśpieszenia sprzętowego, ale nie zawsze jest potrzebne, nie wiem co robisz).

Ew. w jakimś SVG to wyświetlać.

Lepiej

zależy co masz na myśli pisząc "lepiej".


Maciej Cąderek
Maciej Cąderek
Własnie miałem pisać "po co Three.js do 2d jak masz Pixi?" ;)
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:9 dni
  • Lokalizacja:Rzeszów
1
nowy12345 napisał(a):

Czy można ukraść źródło takiej strony? (wiem, że jest to minifikowane, ale muszę mieć pewność, że nikt tego nie skopiuje by użyć u siebie lub "rozczytać kod")

Tak, każdy kod wykonywany po stronie klienta traktuj jako jawny. Minifikacja, kompresja czy obfuskacja jest i tak odwracalna - mniejszym lub większym kosztem. Ale kodu dosyć często nie trzeba rozumieć. Wystarczy powielić i uruchomić zminifikowany fragment kodu.

Dotyczy to three js, web gl, jquery, wszystkiego, do czego używasz javascriptu.

Niemniej kradzieże zdarzają się mega rzadko, a jak już to raczej na niewielką skalę. Wbrew temu co sądzi spora część programistów (w tym większość początkujących) - nikt nie chce ich kodu.


0
  1. Ja chcę wyświetlać pliki wektorowe (np.: dxf) - średnio po 100kB (ale z opcją nawet do 1M).
  2. Używaliście kiedyś WebGL w połączeniu z REACT? (są biblioteki na github)
  3. A Pixi nie jest bardziej do grafiki rastrowej? Ja chce głównie wektory.
  4. To jak polecacie się zabezpieczyć?
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:9 dni
  • Lokalizacja:Rzeszów
2
  1. Nie pisać kodu, zająć się ogrodnictwem. Nie da się dać czegoś komuś, ale żeby ten ktoś tego nie miał. Tutaj dajesz kod. W ostateczności możesz nie renderować obiektów na żywo tylko nagrać i wrzucić filmik ze znakiem wodnym. To już może stanowić jakieś wyzwanie, bo mazanie klatka po klatce jest ciężkie. Ale to podpada w paranoję. Zrób swoje i opublikuj.

czysteskarpety
czysteskarpety
znak wodny w filmiku to nie jest problem, tylko kwestia czasu jak bardzo ma być dopieszczony
0
  1. Dzięki :) Ale nie zależy mi aż tak :P

A co Ty byś wybrał do wyświetlania wektorów (dxf)? WebGL czy Pixi (w Pixi trochę głupio się to tworzy...)

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:3 minuty
  • Postów:8411
0
  1. A Pixi nie jest bardziej do grafiki rastrowej? Ja chce głównie wektory.

W Pixi masz klasę Graphics do robienia grafiki wektorowej: https://pixijs.github.io/docs/PIXI.Graphics.html

A co Ty byś wybrał do wyświetlania wektorów

To zależy. Możliwości jest dużo. Najprościej pewnie byłoby zrobić to bez żadnej biblioteki, tylko w Canvas (kontekst 2D), tam masz moveTo, lineTo itp. i jedziesz...

Ale tak naprawdę jeśli chcesz je tylko wyświetlić, to nie ma aż takiego znaczenia. Co innego jakbyś chciał je animować, łapać eventy, zoomować, dodawać efekty, robić wodotryski.

  1. Ja chcę wyświetlać pliki wektorowe (np.: dxf) - średnio po 100kB (ale z opcją nawet do 1M).

Jeśli chcesz je tylko wyświetlić to najprostsza metoda to nic nie robić, tylko eksportować w jakimś narzędziu do pliku *.svg i zrobić <img src="adres.svg" width="SZEROKOSC" height="WYSOKOSC"> i masz obrazek bez pisania kodu.

z opcją nawet do 1M)

to już musisz w praktyce zobaczyć, jak tego rodzaju pliki będą się wyświetlać.


0

Dzięki za odpowiedź. Poczytałem o Pixi i WebGL, przetestowałem oba i wnioski mam takie:

  • Do moich zastosowań nie ma po co się bawić w Pixi bo w WebGL (czystym) nie muszę definiować kamery (po prostu rysuję na canvasie).

Mimo to pojawiło się pytanie: Jeżeli chcę event, który wyłapuje np.: czy kursor jest nad wektorem?
Czy to tak naprawdę pisze się samemu na zasadzie wyszukiwania najbliższych elementów?

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:3 minuty
  • Postów:8411
0

Do moich zastosowań nie ma po co się bawić w Pixi bo w WebGL (czystym) nie muszę definiować kamery (po prostu rysuję na canvasie).

Na pewno? Po prostu rysujesz po canvasie? W WebGL?

Co prawda w WebGL póki co dopiero zaczynam się bawić, ale na tyle na ile go zdążyłem poznać to, żeby cokolwiek narysować na canvasie w WebGL trzeba najpierw napisać dwa shadery w GLSL (vertex shader oraz fragment shader), skompilować je, zlinkować program, stworzyć bufor wierzchołków, dobindować bufor, przekazać atrybuty oraz uniformy do shadera, dopiero wtedy można cokolwiek narysować.

Dlatego dziwi mnie ta opinia i mam wrażenie, że piszesz o kontekście 2D na Canvasie (który faktycznie jest łatwy - moveTo, lineTo itp.) a nie o kontekście WebGL (chociaż fakt, że żadnej kamery w WebGL nie trzeba definiować, chociaż i tak zwykle trzeba współrzędne przekonwertować jakoś do układu współrzędnych WebGL który jest trochę dziwny).

Z drugiej strony niskopoziomowość WebGLa może być zaletą, bo można dostosować wszystko do swoich potrzeb, nie jest się ograniczonym przez nic (chociaż to głównie przy bardziej ambitnych projektach zaczyna mieć znaczenie). W ogóle teraz się jaram WebGL, ale kiedyś wręcz mnie odstraszała jego niskopoziomowość.


edytowany 1x, ostatnio: LukeJL
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)