如何获取片段着色器的坐标?gl_FragCoord无法正常工作。

3

我正在尝试制作一个曼德勃罗集浏览器,它将根据窗口中的坐标来对屏幕上的像素进行着色。我之前做过这件事,但没有使用着色器,速度非常慢。我无法弄清楚如何获取片段的位置,以便可以使用我已经开发的算法来渲染曼德勃罗集。

我使用的是ljgwl 3。我一整天都在研究如何做到这一点,但我找不到任何全面的结果来获取坐标。看起来gl_FragCoord应该可以工作,然后我可以使用gl_FragCoord.x和gl_FragCoord.y来获取x和y值,这就是我需要的算法,但我的屏幕总是变成全红。我没有从顶点着色器传递任何信息到我的片段着色器,因为我需要根据其x和y值渲染曼德勃罗集中每个坐标的颜色,所以顶点位置并不有用(我也不知道如何获取它们)。

以下是我的片段着色器:

    in vec4 gl_FragCoord;
    uniform vec2 viewportDimensions;
    uniform float minX;
    uniform float maxX;
    uniform float minY;
    uniform float maxY;

    vec3 hsv2rgb(vec3 c){
        vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
        vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
        return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
    }

    void main(){
        float x = gl_FragCoord.x;
        float y = gl_FragCoord.y;

        vec2 c = vec2((x* (maxX-minX) / viewportDimensions.x + minX), (y*(maxY-minY)/ viewportDimensions.y + minY));
        vec2 z = c;

        float limit = 1000;
        float iterations = 0;
        for(int i = 0; i < int(limit); i++){
            float t = 2.0 * z.x * z.y + c.y;
            z.x = z.x * z.x - z.y * z.y + c.x;
            z.y = t;

            if(z.x * z.x + z.y *z.y > 4){
                break;
            }

            iterations += 1.0;
        }
        float itRGB = iterations/limit;
        vec3 hsv = vec3(itRGB, 1.0, 1.0);
        vec3 rgb = hsv2rgb(hsv);
        gl_FragColor = vec4(rgb, 1);
    }

我认为我可以在不声明它的情况下使用gl_FragCoord,但无论哪种方式都不起作用。向量c试图将当前坐标映射到基于窗口当前分辨率的复数网格中的一个坐标。这是我的顶点着色器中的所有内容:
    void main(){
        gl_Position = ftransform();
    }

以下是我的客户端代码相关部分:

    glBegin(GL_POLYGON);
                glVertex2f(-1f, -1f);
                glVertex2f(1f, -1f);
                glVertex2f(1f, 1f);
                glVertex2f(-1f, 1f);
    glEnd();

这段代码在我的窗口循环中运行,并仅创建了mandelbrot渲染的正方形。

这是我工作中的Java Mandelbrot程序的输出,它不使用着色器:enter image description here

这是我的着色器程序的输出: enter image description here

全屏显示: enter image description here

我也不知道如何正确调整窗口大小而不出现黑边。 我尝试在上面的代码中使用vec2 c来实现这一点,因为我已将uniforms设置为窗口的高度和宽度并在将坐标映射到复数平面时使用了该值,但由于gl_FragCoord似乎无法工作,所以这种方法也应该不奏效。非常感谢提供glfwCreateWindow基于lgjwl屏幕调整当前指南的链接。


1
你期望 c 是什么?你期望它是在 [-1, 1] 范围内的值吗?min/maxX/Y 是什么,它们与 viewportDimensions 有什么关系? - Nicol Bolas
@NicolBolas C旨在成为Mandelbrot所在的复数网格中的一个坐标。目前,我将其设置为[-2, 2] y轴和[-2, 2] x轴。minX、maxX、minY、maxY定义了我想要查看的复数平面的定义域和值域,viewportDimensions旨在用于将这些数字映射到窗口的像素值。 - uhin
1个回答

3

gl_FragCoord 是一个内置的输入变量,不需要声明输入变量gl_FragCoordxy 是窗口 (像素) 坐标。
gl_FragCoord 的左下角是 (0.5, 0.5),右上角是 (W-0.5, H-0.5),其中WH 是视口的宽度和高度。

您需要将 gl_FragCoord.x 映射到区间 [minX, maxX],将 gl_FragCoord.y 映射到区间 [minY, maxy]。
我建议使用 GLSL 函数 mix 来完成此任务。
假设 viewportDimensions 包含视口矩形在窗口 (像素) 坐标系中的宽度和高度。

vec2 c = mix(vec2(minX, minY), vec2(maxX, maxY), gl_FragCoord.xy / viewportDimensions.xy);

请看这个(WebGL)示例,我已经将建议应用于问题的片段着色器中。
上下限初始化如下:
minX = -2.5
minY = -2.0
maxX =  1.5
maxY =  2.0 

(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.minX = gl.getUniformLocation(progDraw, "minX");
    progDraw.maxX = gl.getUniformLocation(progDraw, "maxX");
    progDraw.minY = gl.getUniformLocation(progDraw, "minY");
    progDraw.maxY = gl.getUniformLocation(progDraw, "maxY");
    progDraw.viewportDimensions = gl.getUniformLocation(progDraw, "viewportDimensions");
    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 = [gl.drawingBufferWidth, gl.drawingBufferHeight];
    vp_size = [window.innerWidth, window.innerHeight];
    //vp_size = [256, 256]
    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.minX, -2.5);
    gl.uniform1f(progDraw.minY, -2.0);
    gl.uniform1f(progDraw.maxX, 1.5);
    gl.uniform1f(progDraw.maxY, 2.0);
    gl.uniform2f(progDraw.viewportDimensions, canvas.width, canvas.height);
    gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
    
    requestAnimationFrame(render);
}  

initScene();

})();
html,body { margin: 0; overflow: hidden; }
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;

attribute vec2 inPos;

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

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

uniform vec2 viewportDimensions;
uniform float minX;
uniform float maxX;
uniform float minY;
uniform float maxY;

vec3 hsv2rgb(vec3 c){
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void main()
{
  float x = gl_FragCoord.x;
  float y = gl_FragCoord.y;

  vec2 c = mix(vec2(minX, minY), vec2(maxX, maxY), gl_FragCoord.xy / viewportDimensions.xy);
  vec2 z = c;

  float limit = 64.0;
  float iterations = 0.0;
  for(int i = 0; i < 64; i++){
      float t = 2.0 * z.x * z.y + c.y;
      z.x = z.x * z.x - z.y * z.y + c.x;
      z.y = t;

      if(z.x * z.x + z.y *z.y > 4.0){
          break;
      }

      iterations += 1.0;
  }
  float itRGB = iterations/limit;
  vec3 hsv = vec3(itRGB, 1.0, 1.0);
  vec3 rgb = hsv2rgb(hsv);
  gl_FragColor = vec4(rgb, 1);
}
</script>

<canvas id="ogl-canvas" style="border: none"></canvas>


2
mix是一个向量函数,因此您应该使用mix(vec2(minX, minY), vec2(maxX, maxY), gl_FragCoord.xy/viewportDimensions) - Nicol Bolas
我不确定使用 mix 是否真的是最佳选择。所需的转换可以简化为一个简单的乘加操作,预先计算出2个系数并将其发送到着色器似乎更有效率。 - derhass
1
@uhin:“如果我放置gl_FragColor = vec4(gl_FragCoord.x,gl_FragCoord.y,1,1);它只显示白屏,这意味着每个片段的x和y都为1?为什么?这就是让我感到困惑的地方。”但是这一点在答案中明确得到了解决。它并不意味着它是1,它意味着它是> = 1,这就是它应该的方式。 - derhass
1
@derhass 哦!我以为gl_FragCoord的值是从[0,1]。谢谢! - uhin
1
@Rabbid76 我的问题是在结束着色器程序后设置我的uniforms。现在我已经解决了。谢谢! - uhin
显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接