如何获取片段着色器的坐标？ gl_FragCoord 不工作
How to get coordinate of fragment shaders? gl_FragCoord not working
我正在尝试制作一个 Mandelbrot 集合浏览器，它将根据其在 window 中的坐标为屏幕上的像素着色。我之前在不使用着色器的情况下完成了此操作，但速度非常慢。我不知道如何获取片段的位置，以便我可以使用我已经开发的算法来渲染 Mandelbrot 集。
我正在使用 ljgwl 3。我整天都在研究如何做到这一点，但我找不到关于如何获取坐标的任何综合发现。似乎 gl_FragCoord 应该可以工作，然后我可以使用 gl_FragCoord.x 和 gl_FragCoord.y 来获取 x 和 y 值，这是算法所需的全部，但我的屏幕最终总是都是红色的。我没有将任何信息从顶点着色器传递到我的片段着色器，因为我需要根据它的 x 和 y 值渲染 Mandelbrot 中每个坐标的颜色，所以顶点位置没有帮助（我也没有了解如何获得这些）。
这是我的片段着色器：
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 而无需先声明它，但无论哪种方式都行不通。 vec2 c 试图根据 window.
的当前分辨率将当前坐标映射到复数网格中的坐标
这就是我的顶点着色器中的所有内容：
void main(){
gl_Position = ftransform();
}
以及我的客户端代码的相关部分：
glBegin(GL_POLYGON);
glVertex2f(-1f, -1f);
glVertex2f(1f, -1f);
glVertex2f(1f, 1f);
glVertex2f(-1f, 1f);
glEnd();
这是我的 window 循环中的 运行，它只是创建了 mandelbrot 应该渲染的正方形。
这是我不使用着色器的 java Mandelbrot 程序的输出：
这是我的着色器程序的输出：
全屏：
我也不知道如何在没有黑条的情况下正确调整 window 的大小。我正在尝试在上面的代码中使用 vec2 c 来执行此操作，因为我已将制服设置为 windows 高度和宽度，并在将坐标映射到复数平面时使用它，但作为 gl_FragCoord 似乎不起作用，那么这也不应该。 link 当前关于基于 glfwCreateWindow 调整 lgjwl 屏幕大小的指南将不胜感激。
gl_FragCoord是内置输入变量，输入变量gl_FragCoord不需要声明。 x和y坐标是window（像素）坐标。
gl_FragCoord左下为(0.5,0.5)，右上为(W-0.5,H-0.5)，其中W和H 是视口的宽度和高度。
您必须将 gl_FragCoord.x 映射到范围 [minX、maxX] 并将 gl_FragCoord.y 映射到范围 [minY、maxy].
为此，我向我们推荐 GLSL 函数 mix。
viewportDimensions 假定包含 window（像素）坐标中视口矩形的宽度和高度。
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>
我正在尝试制作一个 Mandelbrot 集合浏览器，它将根据其在 window 中的坐标为屏幕上的像素着色。我之前在不使用着色器的情况下完成了此操作，但速度非常慢。我不知道如何获取片段的位置，以便我可以使用我已经开发的算法来渲染 Mandelbrot 集。
我正在使用 ljgwl 3。我整天都在研究如何做到这一点，但我找不到关于如何获取坐标的任何综合发现。似乎 gl_FragCoord 应该可以工作，然后我可以使用 gl_FragCoord.x 和 gl_FragCoord.y 来获取 x 和 y 值，这是算法所需的全部，但我的屏幕最终总是都是红色的。我没有将任何信息从顶点着色器传递到我的片段着色器，因为我需要根据它的 x 和 y 值渲染 Mandelbrot 中每个坐标的颜色，所以顶点位置没有帮助（我也没有了解如何获得这些）。
这是我的片段着色器：
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 而无需先声明它，但无论哪种方式都行不通。 vec2 c 试图根据 window.
的当前分辨率将当前坐标映射到复数网格中的坐标这就是我的顶点着色器中的所有内容：
void main(){
gl_Position = ftransform();
}
以及我的客户端代码的相关部分：
glBegin(GL_POLYGON);
glVertex2f(-1f, -1f);
glVertex2f(1f, -1f);
glVertex2f(1f, 1f);
glVertex2f(-1f, 1f);
glEnd();
这是我的 window 循环中的 运行，它只是创建了 mandelbrot 应该渲染的正方形。
这是我不使用着色器的 java Mandelbrot 程序的输出：
这是我的着色器程序的输出：
全屏：
我也不知道如何在没有黑条的情况下正确调整 window 的大小。我正在尝试在上面的代码中使用 vec2 c 来执行此操作，因为我已将制服设置为 windows 高度和宽度，并在将坐标映射到复数平面时使用它，但作为 gl_FragCoord 似乎不起作用，那么这也不应该。 link 当前关于基于 glfwCreateWindow 调整 lgjwl 屏幕大小的指南将不胜感激。
gl_FragCoord是内置输入变量，输入变量gl_FragCoord不需要声明。 x和y坐标是window（像素）坐标。
gl_FragCoord左下为(0.5,0.5)，右上为(W-0.5,H-0.5)，其中W和H 是视口的宽度和高度。
您必须将 gl_FragCoord.x 映射到范围 [minX、maxX] 并将 gl_FragCoord.y 映射到范围 [minY、maxy].
为此，我向我们推荐 GLSL 函数 mix。
viewportDimensions 假定包含 window（像素）坐标中视口矩形的宽度和高度。
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>