在 glsl es 2.0、Gamemaker Studio 2.0 中获取渐变正方形的问题 [英] Issue getting gradient square in glsl es 2.0, Gamemaker Studio 2.0
问题描述
我制作了一个包含 4 个三角形的三角形列表,中间点的颜色不同.然后旨在组合三角形以获得漂亮的渐变.但是三角形的边缘会产生不需要的线条,我不希望这些线条一直平滑.我怎样才能得到想要的结果?
图片:
着色器代码:
//简单的直通顶点着色器//属性 vec3 in_Position;//(x,y,z)属性 vec4 in_Colour;//(r,g,b,a)属性 vec2 in_TextureCoord;//(紫外线)变化 vec2 v_texcoord;变化 vec4 v_color;无效的主要(){vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;v_colour = in_Color;v_texcoord = in_TextureCoord;}////简单的直通片段着色器//变化 vec2 v_texcoord;变化 vec4 v_color;无效的主要(){gl_FragColor = v_color;}
游戏制作者代码:创建事件:
//建立顶点列表顶点格式开始();顶点格式添加位置();顶点格式添加颜色();vertex_format_add_textcoord();v_format = vertex_format_end();v_buff = vertex_create_buffer();顶点开始(v_buff,v_format);//三角形0vertex_position(v_buff, 200, 100);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 0.0, 0.0);vertex_position(v_buff, 600, 100);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 1.0, 0.0);vertex_position(v_buff, 400, 300);顶点颜色(v_buff,c_red,1);vertex_texcoord(v_buff, 0.5, 0.5);//三角形1vertex_position(v_buff, 200, 100);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 0.0, 0.0);vertex_position(v_buff, 200, 500);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 0.0, 1.0);vertex_position(v_buff, 400, 300);顶点颜色(v_buff,c_red,1);vertex_texcoord(v_buff, 0.5, 0.5);//三角形2vertex_position(v_buff, 600, 100);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 1.0, 0.0);vertex_position(v_buff, 600, 500);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 1.0, 1.0);vertex_position(v_buff, 400, 300);顶点颜色(v_buff,c_red,1);vertex_texcoord(v_buff, 0.5, 0.5);//三角形3vertex_position(v_buff, 200, 500);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 0.0, 1.0);vertex_position(v_buff, 600, 500);顶点颜色(v_buff,c_black,1);vertex_texcoord(v_buff, 1.0, 1.0);vertex_position(v_buff, 400, 300);顶点颜色(v_buff,c_red,1);vertex_texcoord(v_buff, 0.5, 0.5);vertex_end(v_buff);tex = sprite_get_texture(sprite_index, 0);
绘制事件:
shader_set(shd_prim);shader_set_uniform_f(uni_radius, var_radius);vertex_submit(v_buff, pr_trianglelist, tex);shader_reset();
你看到的效果是错觉.您可以通过对颜色进行分级来使其可见.为此使用以下片段着色器:
可变 vec2 v_texcoord;变化 vec4 v_color;无效的主要(){浮动步数 = 4.0;//浮动步数 = 8.0;//浮动步数 = 16.0;//浮动步数 = 32.0;vec3 gradColor = floor(v_colour.rgb * 步数)/步数;gl_FragColor = vec4(gradColor, 1.0);}
4 种颜色:
8 种颜色:
16 种颜色:
32 色:
为了获得更好的结果,您必须在片段着色器中计算颜色.以下着色器平滑地更改渐变,从视图中间的圆形渐变到视图边界的方形渐变.片段颜色使用 GLSL
I made a triangle list with 4 triangles, having the middle point a different color. And then aim to combine the triangles to get a nice gradient. But the edges of the triangles create unwanted lines, I don't want these lines I want it to be smooth al the way. How can I get the desired result?
Images:
Shader Code:
// Simple passthrough vertex shader
//
attribute vec3 in_Position; // (x,y,z)
attribute vec4 in_Colour; // (r,g,b,a)
attribute vec2 in_TextureCoord; // (u,v)
varying vec2 v_texcoord;
varying vec4 v_colour;
void main()
{
vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;
v_colour = in_Colour;
v_texcoord = in_TextureCoord;
}
//
// Simple passthrough fragment shader
//
varying vec2 v_texcoord;
varying vec4 v_colour;
void main()
{
gl_FragColor = v_colour;
}
Gamemaker code: Create event:
//Build vertices list
vertex_format_begin();
vertex_format_add_position();
vertex_format_add_colour();
vertex_format_add_textcoord();
v_format = vertex_format_end();
v_buff = vertex_create_buffer();
vertex_begin(v_buff, v_format);
//triangle 0
vertex_position(v_buff, 200, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 0.0);
vertex_position(v_buff, 600, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 0.0);
vertex_position(v_buff, 400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);
//triangle 1
vertex_position(v_buff, 200, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 0.0);
vertex_position(v_buff, 200, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 1.0);
vertex_position(v_buff, 400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);
//triangle 2
vertex_position(v_buff, 600, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 0.0);
vertex_position(v_buff, 600, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 1.0);
vertex_position(v_buff, 400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);
//triangle 3
vertex_position(v_buff, 200, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 1.0);
vertex_position(v_buff, 600, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 1.0);
vertex_position(v_buff, 400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);
vertex_end(v_buff);
tex = sprite_get_texture(sprite_index, 0);
Draw event:
shader_set(shd_prim);
shader_set_uniform_f(uni_radius, var_radius);
vertex_submit(v_buff, pr_trianglelist, tex);
shader_reset();
The effect that you can see is optical illusion. You can make this visible by grading the colors. Use the following fragment shader for this:
varying vec2 v_texcoord;
varying vec4 v_colour;
void main()
{
float steps = 4.0;
//float steps = 8.0;
//float steps = 16.0;
//float steps = 32.0;
vec3 gradColor = floor(v_colour.rgb * steps) / steps;
gl_FragColor = vec4(gradColor, 1.0);
}
4 colors:
8 colors:
16 colors:
32 colors:
To achieve a better result, you have to do the color calculated in the fragment shader. The following shader smoothly change the gradient, from a circular gradient in the middle of the the view, to a square gradient at the borders of the view. The fragment color is interpolated form color1
to color2
, using the GLSL mix
function.
varying vec2 v_texcoord;
varying vec4 v_colour;
void main()
{
vec4 color1 = vec4(1.0, 0.0, 0.0, 1.0);
vec4 color2 = vec4(0.0, 0.0, 0.0, 1.0);
vec2 distV = v_texcoord * 2.0 - 1.0;
float maxDist = max(abs(distV.x), abs(distV.y));
float circular = length(distV);
float square = maxDist;
gl_FragColor = mix(color1, color2, mix(circular,square,maxDist));
}
Preview:
这篇关于在 glsl es 2.0、Gamemaker Studio 2.0 中获取渐变正方形的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!