3D Grapher - funkcje 3d w przeglądarce

Przypomnienie dawnych aplikacji ciąg dalszy. Teraz przyszedł czas na 3d grapher. Aplikacja rysuje wykresy funkcji dwóch zmiennych, zadane jawnie i parametrycznie. Ponadto rysuje też superpowierzchnie. Oparta jest o bibliotekę Three.js i dostępna bezpośrednio w przeglądarce. Projekt ten powstał jako eksperyment łączący grafikę WebGL z dynamiczną analizą funkcji matematycznych i szybko został doceniony przez społeczność - aplikacja została wyróżniona w Chrome Experiments oraz zdobyła drugie miejsce w konkursie Mozilla Dev Derby. 3d Grapher Celem aplikacji było stworzenie lekkiego, interaktywnego narzędzia do wizualizacji funkcji 3D, które:

  • działa w czasie rzeczywistym w przeglądarce
  • nie wymaga instalacji dodatkowego oprogramowania
  • umożliwia dynamiczną zmianę parametrów funkcji
  • prezentuje dane w sposób intuicyjny i atrakcyjny wizualnie
Kluczowym wyborem technologicznym była biblioteka Three.js, która upraszcza pracę z WebGL i pozwala skupić się na logice aplikacji zamiast niskopoziomowej grafice. Rdzeniem aplikacji jest generator siatki (mesh), który odwzorowuje funkcję matematyczną w przestrzeni trójwymiarowej. Dla zadanej funkcji [math]z=f(x,y)[/math] generowana jest siatka punktów:
  • działa w czasie rzeczywistym w przeglądarce
  • nie wymaga instalacji dodatkowego oprogramowania
  • umożliwia dynamiczną zmianę parametrów funkcji
  • prezentuje dane w sposób intuicyjny i atrakcyjny wizualnie
Dzięki temu powstaje geometryczna reprezentacja funkcji, renderowana następnie przez GPU. Pipeline renderowania wygląda następująco:
  • generowanie geometrii (vertices + faces)
  • przypisanie materiału (shading, kolorystyka)
  • renderowanie sceny przez WebGLRenderer
  • obsługa kamery i interakcji użytkownika
Do nawigacji wykorzystana jest kamera perspektywiczna, a użytkownik może obracać, przybliżać i przesuwać widok, co znacząco ułatwia analizę wykresu. Dzięki Three.js i WebGL możliwe jest tworzenie zaawansowanych wizualizacji dostępnych dla każdego użytkownika z poziomu przeglądarki. Projekt jest również dowodem na to, że połączenie matematyki, grafiki i web developmentu może prowadzić do ciekawych i docenianych rozwiązań - czego potwierdzeniem są wyróżnienie w Chrome Experiments oraz drugie miejsce w konkursie Mozilla Dev Derby.

Może Cię zainteresować:
Generatywne kwiaty Fibonacciego w Three.js
Matematyczne efekty w Three.js
Implicit equation grapher i marching cubes