Ich habe Online-Beispiele zusammengefügt, um einen Mandelbrot-Set-Fragment-Shader zu erstellen. Der Vertex-Shader macht im Grunde nichts, er weist gl_Position zu, und der Fragment-Shader berechnet etwas, um das Bild zu berechnen.
Allerdings habe ich eine Anzahl von #define s, die ich durch JavaScript-gesteuerte Variablen ersetzen möchte, und ich weiß nicht, wie ich das machen soll. Wenn ein Beispiel gezeigt werden könnte, wie man #define MAX_ITERATIONS 200 durch eine JavaScript zugewiesene Variable im folgenden Code ersetzt, könnte ich wahrscheinlich den Rest von ihnen herausfinden. Ich glaube, dass ich ein uniform oder varying spezifizieren muss, bin aber nicht sicher, wie man die Kommunikation von JavaScript zu GLSL verwaltet.
Ich verstehe auch nicht, wie aPosition zwischen JavaScript und dem Vertex-Shader funktioniert, was ich habe, ist im Grunde dasselbe wie in den Beispielen.
JavaScript , ich könnte mir vorstellen, dass nur init() wichtig für SO-Leser ist, der Rest wird bei Bedarf gepostet:
Vertex Shader :
%Vor% Fragment Shader , MAX_ITERATIONS , XMIN , YMIN und WH sollten in JavaScript gesteuert werden:
Die kurze Antwort ist, dass Sie im Grunde 2 Optionen haben
Werte von JavaScript nach GLSL einheitlich übergeben.
Wenn Sie beispielsweise einen Float übergeben möchten, erstellen Sie eine Float-Uniform
%Vor%In JavaScript kompilieren und verlinken Sie diesen Shader, dann suchen Sie den Speicherort der Uniform
%Vor%Sie können jetzt einen Wert an GLSL mit
übergeben %Vor%Bearbeiten Sie Strings vor dem Kompilieren des Shaders
%Vor%...
%Vor%(1) oben ist zum Übergeben von Dingen, die sich oft ändern. # 2 dient zum Ändern eines Shaders vor dem Kompilieren. # 1 ist eine Technik, die in fast 100% der WebGL-Programme verwendet wird. # 2 wird oft verwendet, wenn Shader im laufenden Betrieb von vielen Game-Engines generiert werden.
Es dauerte ungefähr 45 Minuten, um gmans Antwort zu implementieren, weil Ich machte immer wieder dumme kleine Fehler. Also hier ist ein voll funktionierender Code Beispiel , das eine anpassbare Kachelkarte erstellt.
Getestet in: Chrome, Internet Explorer und Edge:
%Vor%Tags und Links javascript webgl glsl