Использование GLSL для визуализации гладкой базовой сетки на плоскости

Я пытаюсь написать фрагментный шейдер 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


webgl babylonjs fragment-shader glsl shader
person josef.van.niekerk    schedule 08.07.2015    source источник
comment
Не могли бы вы проверить, работает ли мое решение?   -  person volzotan    schedule 14.12.2015

Ответы (1)


arrow_upward
4
arrow_downward

Этот код фрагментного шейдера должен работать так, как ожидалось:

#extension GL_OES_standard_derivatives : enable

precision highp float;

varying vec2 vUV;

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

    float x = fract(vUV.x * divisions);
    x = min(x, 1.0 - x);

    float xdelta = fwidth(x);
    x = smoothstep(x - xdelta, x + xdelta, thickness);

    float y = fract(vUV.y * divisions);
    y = min(y, 1.0 - y);

    float ydelta = fwidth(y);
    y = smoothstep(y - ydelta, y + ydelta, thickness);

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

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

Я добавил выражение

x = min(x, 1.0 - x);

чтобы сделать значение x (а также y) симметричным относительно центров ребер. Поскольку исходный код напрямую использовал выходные данные функции «fract», он прыгал между большими и маленькими значениями вокруг центров краев, что создавало острые углы.

person volzotan    schedule 10.07.2015