[FRAGE] webgl shader

m1au · 26. Jan. 2016

Hi

Ich schreibe Vertex- und Fragment-Shader in html-script-tags in den html-head. Z. B.:

HTML:

<head>
   <script id="vs" type="x-shader/x-vertex">
   </script>
   <script id="fs" type="x-shader/x-fragment">
   </script>
</head>

Die script-Texte lese ich in JS aus. Siehe https://developer.mozilla.org/de/do...ufügen_von_2D_Inhalten_in_einen_WebGL-Kontext "Shader aus dem DOM laden".

In den Shadern definiere ich diverse Variablen:

- attributes
- uniforms
- varyings

Nun möchte ich nicht nur die shader-script-Texte per JS auslesen, sondern auch automatisch die shader-Variablen in JS deklarieren.

Z. B. habe ich in einem shader-script definiert:

Code:

attribute vec3 aVertexPosition;

Mein JS-script soll dann automatisch die folgende Funktion ausführen:

Code:

/**
 * @param object gl WebGL-Kontext
 * @param object program WebGL-Programm
 * @param string name Attribut-Name
 * @return int Attribut-Index
 */
function getAttrib(gl, program, name) {
   var index = gl.getAttribLocation(program, name);
   gl.enableVertexAttribArray(index);
   return index;
}

Der JS-Parser erkennt im shader-script das attribute und führt automatisch aus:

Code:

var vertexPositionAttrib = getAttrib(gl, program, "aVertexPosition");

Ist das erlaubt? Funktioniert das dann generell für alle Attribute? Für vec2, vec3 und vec4-Attribute scheint das zu stimmen, wenn ich das oben verlinkte Tutorial richtig verstanden habe.

tsseh · 26. Jan. 2016

m1au schrieb:
Der JS-Parser erkennt im shader-script das attribute und führt automatisch aus:

der js parser hat damit schon mal nichts zu tun, da das kein js ist, sondern die shader source
jetzt findest du entweder eine webgl-api-funktion, die dir alle attributevariablennamen zurückliefert, oder du parst die shader source selber, oder du besorgst dir nur die variablen die du auch benötigst und zwar dann wenn du sie benötigst und nur dort lokal wo du sie benötigst. das scheint mir das vernümpftigste zu sein.

m1au · 27. Jan. 2016

tsseh schrieb:
jetzt findest du entweder eine webgl-api-funktion, die dir alle attributevariablennamen zurückliefert

So ist das natürlich viel besser! Ich dachte mir schon, dass meine Idee nicht so toll ist

Und ich habs auch hinbekommen:

Code:

"use strict";

  class Program {
     constructor(gl, shaderProgram) {
        // WebGL-Attributes:
        let count = gl.getProgramParameter(shaderProgram, gl.ACTIVE_ATTRIBUTES);
        for(let i = 0; i < count; ++i) {
           let name = gl.getActiveAttrib(shaderProgram, i).name;
           eval("this." + name + " = \"x" + name + "x\"");
        }
        
        // WebGL-Uniforms:
        count = gl.getProgramParameter(shaderProgram, gl.ACTIVE_UNIFORMS);
        for(let i = 0; i < count; ++i) {
           let name = gl.getActiveUniform(shaderProgram, i).name;
           eval("this." + name + " = \"x" + name + "x\"");
        }
     }
  }

var y = new Program(gl, shaderProgram);
  for(var i in y)
     console.log(i + ": " + y[i]);

Der eval-String muss dann letztendlich natürlich etwas anders aussehen. Getestet in Google Chrome.

Danke!

[FRAGE] webgl shader

m1au

New member

tsseh

Lounge-Member

m1au

New member