投稿者 tel | 2014年12月19日

WebGLのWEBGL_debug_shaders

WebGLの拡張機能の WEBGL_debug_shaders を使うとGLSLを変換したシェーダが取得できる。

https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_shaders/

使い方は拡張機能を有効にして、関数にシェーダオブジェクトを渡すと文字列が返ってくる。

// 拡張機能を有効にする
var ext = gl.getExtension('WEBGL_debug_shaders');

// シェーダオブジェクト(fs, vs)を渡す
console.log(ext.getTranslatedShaderSource(fs));
console.log(ext.getTranslatedShaderSource(vs));

ドキュメントによればGLSL ESが直接動く環境でもWebGLのGLSL ESからGLSL ESへ変換がされているらしい。

頂点シェーダ

attribute vec3 position;

varying vec2 uv;
varying vec2 pos;

void main() {
    pos = position.xy;
    uv = position.xy * 0.5 + 0.5;
    gl_Position = vec4(position.xy, 0.0, 1.0);
}

フラグメントシェーダ

precision mediump float;

varying vec2 uv;
varying vec2 pos;

void main() {
    float d = atan(pos.x, pos.y);
    float y = smoothstep(-2.4, 2.4, d);
    gl_FragColor = vec4(y, y, y, 1.0);
}

WindowsのChromeで実行すると上記のようなコードから以下の様なHSLSが取得できる。

頂点シェーダ

float4 vec4(float2 x0, float x1, float x2)
{
    return float4(x0, x1, x2);
}
#ifdef ANGLE_ENABLE_LOOP_FLATTEN
#define LOOP [loop]
#define FLATTEN [flatten]
#else
#define LOOP
#define FLATTEN
#endif
// Attributes
static float3 _webgl_74509a83309904df = {0, 0, 0};

static float4 gl_Position = float4(0, 0, 0, 0);

// Varyings
static  float2 _webgl_758cdc8b0df6c2a9 = {0, 0};
static  float2 _webgl_f43c42c7aabc2f21 = {0, 0};

;
;
;
void gl_main()
{
{
(_webgl_f43c42c7aabc2f21 = _webgl_74509a83309904df.xy);
(_webgl_758cdc8b0df6c2a9 = ((_webgl_74509a83309904df.xy * 0.5) + 0.5));
(gl_Position = vec4(_webgl_74509a83309904df.xy, 0.0, 1.0));
}
}
;

フラグメントシェーダ

float4 vec4(float x0, float x1, float x2, float x3)
{
    return float4(x0, x1, x2, x3);
}
#ifdef ANGLE_ENABLE_LOOP_FLATTEN
#define LOOP [loop]
#define FLATTEN [flatten]
#else
#define LOOP
#define FLATTEN
#endif
// Varyings
static  float2 _webgl_f43c42c7aabc2f21 = {0, 0};

static float4 gl_Color[1] =
{
    float4(0, 0, 0, 0)
};

cbuffer DriverConstants : register(b1)
{
};

#define GL_USES_FRAG_COLOR
float atanyx(float y, float x)
{
    if(x == 0 && y == 0) x = 1;
    return atan2(y, x);
}
;
;
void gl_main()
{
{
float _webgl_14a396257f58cd59 = atanyx(_webgl_f43c42c7aabc2f21.x, _webgl_f43c42c7aabc2f21.y);
float _webgl_75c422100f18a043 = smoothstep(-2.4000001, 2.4000001, _webgl_14a396257f58cd59);
(gl_Color[0] = vec4(_webgl_75c422100f18a043, _webgl_75c422100f18a043, _webgl_75c422100f18a043, 1.0));
}
}
;

HSLSは詳しくないが、いくつかの関数と変数を作って大本から呼び出す感じだろうか。いまのところ使い道は思い浮かばない。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。