WebGL Three.js - bezpieczeństwo kodu

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

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".

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.

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ć?

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.

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ć.

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?

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ść.