Hallo miteinander!

Ich bin auf der Suche nach etwas Inspiration, wie ich in GLSL ES geschriebene Shader am besten in meinen JavaScript-Code einbauen kann.

Für diejenigen, die sich mit WebGL oder OpenGL bislang noch nicht beschäftigt haben, hier mal ein kurzer Umriss des Problems:

Zunächst braucht man für die Darstellung von 3D-Grafik via WebGL zwei Dinge, nämlich ein canvas Element und ein Object, dass den WebGLRenderingContext repräsentiert, etwas vereinfacht also...

var scene = document.getElementsByTagName( 'CANVAS' )[ 0 ];  
  
var GL = scene.getContext( 'experimental-webgl' );

Die folgenden Schritte zum Einbau eines Shaders erklären sich dann mehr oder weniger von selbst, wobei ich das hier nur mal am Beispiel eines vShaders darstellen will...

var shaderProgram = GL.createProgram( );  
  
var vertexShader = GL.createShader( GL.VERTEX_SHADER );  
  
GL.shaderSource( vertexShader, vertexShaderSource );  
  
GL.compileShader( vertexShader );  
  
GL.attachShader( shaderProgram, vertexShader );  
  
GL.linkProgram( shaderProgram );  
  
GL.useProgram( shaderProgram );

Der aufmerksame Leser wird sich nun fragen, wo vertexShaderSource herkommt, - und genau da liegt das Problem! ;-)

Die Variable vertexShaderSource beinhaltet (hier) den in GLSL ES geschriebenen Code des Shaders, und wie der in diese Variable reinkommt, dafür gibt es zwei Möglichkeiten, nämlich erstens als String direkt in JS...

var vertexShaderSource =  
  
'attribute vec3 aVertexPosition; \n\  
 attribute vec4 aVertexColor; \n\  
 \n\  
 uniform mat4 uMVMatrix; \n\  
 uniform mat4 uPMatrix; \n\  
 \n\  
 varying vec4 vColor; \n\  
 \n\  
 void main ( void ) { \n\  
   \n\  
   gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1.0 ); \n\  
   \n\  
   vColor = aVertexColor; \n\  
   \n\  
 }';

...oder zweitens im HTML als zusätzliches script, dem man einen type zuweist, mit dem der Browser nichts anfangen kann und das er deshalb ignoriert...

<script id="vShader" type="x-shader/x-vertex">  
  
attribute vec3 aVertexPosition;  
attribute vec4 aVertexColor;  
  
uniform mat4 uMVMatrix;  
uniform mat4 uPMatrix;  
  
varying vec4 vColor;  
  
void main ( void ) {  
  
  gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1.0 );  
  
  vColor = aVertexColor;  
  
}  
  
</script>

...und welches man dann mit einer Funktion ins JS script läd.

Beide Methoden sind zwar einigermaßen unhandlich, aber doch eigentlich unproblematisch, wenn es nur darum geht, eine einzelne 3D-Szene zu zeichnen.

Wenn man jedoch innerhalb eines Programms die Shader möglichst variabel anpassen will, wäre es natürlich gut, wenn man das Hinzufügen und Entfernen von zum Beispiel attributes und uniforms irgendwie standardisieren könnte...

Man müsste also quasi den GLSL ES Code in JS Code 'übersetzen', und wie das am besten anzugehen wäre ist nun das Problem, für dessen Lösung ich mir eure Mithilfe erhoffe. ;-)

Schonmal Dank im Voraus für die Mühe und wie immer beste Grüße

var