6

平らな地面に参照グリッドをレンダリングする GLSL フラグメント シェーダーを作成しようとしています。BabylonJS を使用して WebGL アプリケーションを作成しています。

コードの動作は次のとおりです。

http://www.babylonjs.com/cyos/#IBHRN#2

#extension GL_OES_standard_derivatives : enable

precision highp float;

varying vec2 vUV;

void main(void) {
    float divisions = 10.0;
    float thickness = 0.01;
    float delta = 0.05 / 2.0;

    float x = fract(vUV.x / (1.0 / divisions));
    float xdelta = fwidth(x) * 2.5;
    x = smoothstep(x - xdelta, x + xdelta, thickness);

    float y = fract(vUV.y / (1.0 / divisions));
    float ydelta = fwidth(y) * 2.5;
    y = smoothstep(y - ydelta, y + ydelta, thickness);

    float c = clamp(x + y, 0.1, 1.0);

    gl_FragColor = vec4(c, c, c, 1.0);
}

結果はまだ非常に滑らかではありません。線の隆起をどのように取り除き、完全にアンチエイリアス処理された線になるのか疑問に思っています。

GLSL フラグメント シェーダーの結果

4

1 に答える 1