GLSL участок дискового сектора.Проблема с углом зажима - PullRequest
1 голос
/ 19 июня 2019

Мой glsl код для построения сектора диска:

const float PI = 3.141592653;

vec4 white = vec4(1.0,1.0,1.0,1.0);
vec4 black = vec4(0.0,0.0,0.0,1.0);

vec2 p  = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y);

float sector(vec2 c, vec2 p, float r, float sa, float alpha){
 float  l  = abs(distance(p,c));
 float  t  = smoothstep(r, r + bl, l); 
 vec2  uv = p - c;
    a = atan(uv.y,uv.x);
    t  = a >= sa         ? t : 1.0;
    t  = a <= sa + alpha ? t : 1.0;
 return t;
}

 float t = sector(vec2(0.0,0.1),p,0.1,PI/2.0,PI/3.0);

gl_FragColor = mix(white,black,t);

Код работает.Но есть недостаток в том, что atan(y,x) возвращает значения в диапазоне [-π,π].

Чтобы обойти эту проблему, я пытаюсь ограничить результирующий угол atan в диапазоне [0,2π]:

a = clamp(2.0*PI + atan(uv.y,uv.x), 0.0, 2.0*PI);

После вышеуказанной замены на экране ничего не отображается.Сектор диска не отображался даже для допустимых значений atan.Что я делаю не так?

РЕДАКТИРОВАТЬ

Спасибо человеку, который ответил на эту тему.Я потратил слишком много времени на эту ошибку.Если кто-то заинтересован в решении этой проблемы, я внес некоторые изменения в код, чтобы отразить, что угол результата может быть в разных квадрантах единичного круга.

float sector(vec2 c, vec2 p, float r, float sa, float alpha){
 float l  = abs(distance(p,c));
 float t  = smoothstep(r, r + bl, l); 
 vec2  uv = p - c;
 float a = atan(uv.y,uv.x);
       a = step(sign(a),0.0)*TWO_PI + a;
       t  = a >= sa         ? t : 1.0;
       t  = a <= sa + alpha ? t : 1.0;
 return t;
}

1 Ответ

1 голос
/ 19 июня 2019

Результат

a = clamp(2.0*PI + atan(uv.y,uv.x), 0.0, 2.0*PI);

находится в диапазоне [PI, 2*PI], поскольку результат 2.0*PI + atan(uv.y,uv.x) находится в диапазоне [PI, 3*PI].

Он имеетбыть

a = clamp(PI + atan(uv.y,uv.x), 0.0, 2.0*PI);

Но так как результат atan всегда находится в диапазоне [-PI, PI], достаточно сделать:

a = PI + atan(uv.y, uv.x);

Если выпросто хотите, чтобы отрицательный диапазон ([0.0, 2*PI]) стал положительным, тогда вам нужно добавить 2*PI в случае, если угол отрицательный:

например

a = atan(uv.y, uv.x);
if (a < 0.0) a += 2.0*PI;

или

a = atan(uv.y, uv.x);
a = step(sign(a),0.0)*2.0*TWO_PI + a;

или даже

a = PI - atan(uv.y, -uv.x);

(function loadscene() {    

var canvas, gl, vp_size, prog, bufObj = {};

function initScene() {

    canvas = document.getElementById( "ogl-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return;

    progDraw = gl.createProgram();
    for (let i = 0; i < 2; ++i) {
        let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
        let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
        gl.shaderSource(shaderObj, source);
        gl.compileShader(shaderObj);
        let status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
        if (!status) alert(gl.getShaderInfoLog(shaderObj));
        gl.attachShader(progDraw, shaderObj);
        gl.linkProgram(progDraw);
    }
    status = gl.getProgramParameter(progDraw, gl.LINK_STATUS);
    if ( !status ) alert(gl.getProgramInfoLog(progDraw));
    progDraw.inPos = gl.getAttribLocation(progDraw, "inPos");
    progDraw.u_time = gl.getUniformLocation(progDraw, "time");
    progDraw.u_resolution = gl.getUniformLocation(progDraw, "resolution");
    gl.useProgram(progDraw);

    var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
    var inx = [ 0, 1, 2, 0, 2, 3 ];
    bufObj.pos = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
    bufObj.inx = gl.createBuffer();
    bufObj.inx.len = inx.length;
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
    gl.enableVertexAttribArray( progDraw.inPos );
    gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 ); 
    
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

    window.onresize = resize;
    resize();
    requestAnimationFrame(render);
}

function resize() {
    vp_size = [window.innerWidth, window.innerHeight];
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
}

function render(deltaMS) {

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
   
    gl.uniform1f(progDraw.u_time, deltaMS/2000.0);
    gl.uniform2f(progDraw.u_resolution, canvas.width, canvas.height);
    gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
    
    requestAnimationFrame(render);
}  

initScene();

})();
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;

attribute vec2 inPos;

varying vec2 ndcPos;

void main()
{
    ndcPos = inPos;
    gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>

<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 ndcPos;  // normaliced device coordinates in range [-1.0, 1.0]
uniform float time;
uniform vec2  resolution;

const float PI = 3.141592653;

float sector(vec2 c, vec2 p, float r, float sa, float alpha){
    float bl = 0.1;
    float l  = abs(distance(p, c ));
    float t  = smoothstep(r-bl, r + bl, l); 
    vec2  uv = p - c;
    //float a = atan(uv.y, uv.x);
    //if (a < 0.0) a += 2.0*PI;
    float a = PI - atan(uv.y, -uv.x);
    t  = a >= sa         ? t : 1.0;
    t  = a <= sa + alpha ? t : 1.0;
    return t;
}

void main()
{
   vec4 white = vec4(1.0,1.0,1.0,1.0);
   vec4 black = vec4(0.0,0.0,0.0,1.0);
  
   vec2 p  = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y);
  
   float t = sector(vec2(0.0), p, 0.9, 0.0, mod(time, 2.0*PI));
  
   gl_FragColor = mix(white,black,t);
}
</script>

<canvas id="ogl-canvas" style="border: none"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...