使用OpenGL Shader实现放大镜效果

使用OpenGL Shader实现放大镜效果

2014年3月16日 renjihe 发表评论 阅读评论

周末闲来无事,想玩玩OpenGL Shader,想想就实现一个放大镜效果的Shader吧。
着色器可以指定放大镜位置、半径、及放大部数,我实现是在片段着色中使用向后映射的双线性插值的方式对当前片段颜色进行插值,而顶点着色器什么都不做。
先来看一下顶点着色器。

1 uniform float texture_id;//当前使用的纹理的ID
2  
3 void main()
4 {
5     gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;//输出默认顶点位置
6     gl_FrontColor = gl_Color;
7     gl_TexCoord[texture_id] = gl_TextureMatrix[texture_id] * gl_MultiTexCoord0;//输出当前顶点对应的纹理坐标。
8 }

再来看一下片段着色器。

01 uniform vec2  in_circle_pos;//从客户端传入的放大镜圆心位置
02 uniform float in_circle_radius;//从客户端传入的放大镜圆半径
03 uniform float in_zoom_times;//从客户端传入的放大镜放大倍数
04  
05 uniform float imageWidth;//从客户端传入的图片宽数据
06 uniform float imageHeight;//从客户端传入的图片高数据
07  
08 uniform float texture_id;//从客户端传入的纹理ID数据
09  
10 uniform sampler2D textureSampler;//从客户端传入的采样器ID
11  
12 vec2 transForTexPosition(vec2 pos)
13 {
14     return vec2((float)pos.x/imageWidth, (float)pos.y/imageHeight);
15 }
16  
17 float getDistance(vec2 pos_src, vec2 pos_dist)
18 {
19     float quadratic_sum = pow((pos_src.x - pos_dist.x), 2) + pow((pos_src.y - pos_dist.y), 2);
20     return sqrt(quadratic_sum);
21 }
22  
23 vec2 getZoomPosition()
24 {
25     float zoom_x = (float)(gl_FragCoord.x - in_circle_pos.x) / in_zoom_times;
26     float zoom_y = (float)(gl_FragCoord.y - in_circle_pos.y) / in_zoom_times;
27     return vec2((float)in_circle_pos.x + zoom_x, (float)in_circle_pos.y - zoom_y);
28 }
29  
30 vec4 getColor()//双线性插值采样
31 {
32     vec2 pos = getZoomPosition();
33  
34     float _x = floor(pos.x);
35     float _y = floor(pos.y);
36  
37     float u = pos.x - _x;
38     float v = pos.y - _y;
39  
40     vec4 data_00 = texture2D(textureSampler, transForTexPosition(vec2(_x, _y)));
41     vec4 data_01 = texture2D(textureSampler, transForTexPosition(vec2(_x, _y + 1)));
42     vec4 data_10 = texture2D(textureSampler, transForTexPosition(vec2(_x + 1, _y)));
43     vec4 data_11 = texture2D(textureSampler, transForTexPosition(vec2(_x + 1, _y + 1)));
44  
45     return (1 - u) * (1 - v) * data_00 + (1 - u) * v * data_01 + u * (1 - v) * data_10 + u * v * data_11;
46 }
47  
48 void main()
49 {
50     vec2 frag_pos = vec2(gl_FragCoord.x, gl_FragCoord.y);
51     //若当前片段位置距放大镜圆心距离大于圆半径时,直接从纹理中采样输出片段颜色
52     if (getDistance(in_circle_pos, frag_pos) > in_circle_radius)
53         gl_FragColor = texture2D(textureSampler, gl_TexCoord[texture_id].st);
54     else//距离小于半径的片段,二次线性插值获得顔色。
55         gl_FragColor = getColor();
56 }

再来看看一看客户端主要操作。
从编译的Shader程序中获取变量,用于后续操作。

1 m_circle_pos = glGetUniformLocation(m_program, "in_circle_pos");
2 m_circle_radius = glGetUniformLocation(m_program, "in_circle_radius");
3 m_zoom_times = glGetUniformLocation(m_program, "in_zoom_times");
4  
5 m_image_width = glGetUniformLocation(m_program, "imageWidth");
6 m_image_height = glGetUniformLocation(m_program, "imageHeight");
7 m_texture_sampler = glGetUniformLocation(m_program, "textureSampler");
8 m_texture_id  = glGetUniformLocation(m_program, "texture_id");

对上面获取的变量赋值。

1 glUniform2f(m_circle_pos, circle_pos.x(), circle_pos.y());
2 glUniform1f(m_circle_radius, (float)100.0);
3 glUniform1f(m_zoom_times, (float)2.0);
4  
5 glUniform1f(m_image_width, (float)this->width);
6 glUniform1f(m_image_height, (float)this->height);
7  
8 glUniform1i(m_texture_sampler, kTexture);
9 glUniform1i(m_texture_id, kTexture);

画图。

1 glBindTexture(GL_TEXTURE_2D, m_textures[kTexture]);
2  
3 glBegin(GL_QUADS);
4     glTexCoord2f(0.0, 0.0);glVertex3f(-this->width/2, this->height/2, 0.0);
5     glTexCoord2f(0.0, 1.0);glVertex3f(-this->width/2, -this->height/2, 0.0);
6     glTexCoord2f(1.0, 1.0);glVertex3f(this->width/2, -this->height/2, 0.0);
7     glTexCoord2f(1.0, 0.0);glVertex3f(this->width/2, this->height/2, 0.0);
8 glEnd();

最终效果如下:

作者:renjihe 出处: http://www.renjihe.com
本站所有文章均是原创,版权归本站所有。欢迎转载,但未经同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力回答你的问题。 要实现圆环循环扩散效果,可以使用 OpenGL Shader。我们可以在 Shader 中计算每个像素点距离圆心的距离,然后根据距离和时间的变化,计算出像素点的颜色值,从而实现圆环循环扩散的效果。 下面是一个基本的 Shader 实现圆环循环扩散效果的示例代码,不需要使用纹理图片。示例代码使用了 GLSL 1.2 版本的语法,需要在 OpenGL 2.0 及以上版本中运行。 Vertex Shader 代码: ``` void main() { gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; gl_TexCoord[0] = gl_MultiTexCoord0; } ``` Fragment Shader 代码: ``` uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_center; uniform float u_radius; uniform vec4 u_color; void main() { // 计算像素点距离圆心的距离 vec2 p = (gl_FragCoord.xy - u_center) / u_radius; float d = length(p); // 计算颜色值 vec4 color = vec4(0.0, 0.0, 0.0, 0.0); if (d < 1.0) { float t = u_time * (1.0 - d); float r = 0.5 + 0.5 * sin(t); float g = 0.5 + 0.5 * sin(t + 0.3); float b = 0.5 + 0.5 * sin(t + 0.6); color = vec4(r, g, b, 1.0); } // 输出颜色值 gl_FragColor = mix(u_color, color, color.a); } ``` 在应用程序中,我们需要使用 glUseProgram 函数启用 Shader,然后设置 Shader 中的 uniform 变量,包括窗口尺寸、时间、圆心位置、圆环半径和颜色值。最后,绘制一个矩形,即可看到圆环循环扩散的效果。 下面是一个示例代码,可以帮助你更好地理解如何实现圆环循环扩散效果: ``` #include <GL/glut.h> #include <cmath> // 定义窗口大小 const int WINDOW_WIDTH = 800; const int WINDOW_HEIGHT = 600; // Shader 程序 ID GLuint programID; // uniform 变量 ID GLuint resolutionID; GLuint timeID; GLuint centerID; GLuint radiusID; GLuint colorID; // 初始化 Shader void initShader() { // 创建 Vertex Shader const char* vertexShaderCode = "void main() {\n" " gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\n" " gl_TexCoord[0] = gl_MultiTexCoord0;\n" "}\n"; GLuint vertexShaderID = glCreateShader(GL_VERTEX_SHADER); glShaderSource(vertexShaderID, 1, &vertexShaderCode, NULL); glCompileShader(vertexShaderID); // 创建 Fragment Shader const char* fragmentShaderCode = "uniform vec2 u_resolution;\n" "uniform float u_time;\n" "uniform vec2 u_center;\n" "uniform float u_radius;\n" "uniform vec4 u_color;\n" "\n" "void main() {\n" " vec2 p = (gl_FragCoord.xy - u_center) / u_radius;\n" " float d = length(p);\n" "\n" " vec4 color = vec4(0.0, 0.0, 0.0, 0.0);\n" " if (d < 1.0) {\n" " float t = u_time * (1.0 - d);\n" " float r = 0.5 + 0.5 * sin(t);\n" " float g = 0.5 + 0.5 * sin(t + 0.3);\n" " float b = 0.5 + 0.5 * sin(t + 0.6);\n" " color = vec4(r, g, b, 1.0);\n" " }\n" "\n" " gl_FragColor = mix(u_color, color, color.a);\n" "}\n"; GLuint fragmentShaderID = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource(fragmentShaderID, 1, &fragmentShaderCode, NULL); glCompileShader(fragmentShaderID); // 创建 Shader 程序 programID = glCreateProgram(); glAttachShader(programID, vertexShaderID); glAttachShader(programID, fragmentShaderID); glLinkProgram(programID); glUseProgram(programID); // 获取 uniform 变量 ID resolutionID = glGetUniformLocation(programID, "u_resolution"); timeID = glGetUniformLocation(programID, "u_time"); centerID = glGetUniformLocation(programID, "u_center"); radiusID = glGetUniformLocation(programID, "u_radius"); colorID = glGetUniformLocation(programID, "u_color"); } // 渲染函数 void render() { // 计算时间 GLfloat time = glutGet(GLUT_ELAPSED_TIME) / 1000.0f; // 设置窗口尺寸 glUniform2f(resolutionID, WINDOW_WIDTH, WINDOW_HEIGHT); // 设置时间 glUniform1f(timeID, time); // 设置圆心位置和圆环半径 glUniform2f(centerID, WINDOW_WIDTH / 2.0f, WINDOW_HEIGHT / 2.0f); glUniform1f(radiusID, WINDOW_WIDTH / 4.0f); // 设置颜色值 glUniform4f(colorID, 0.0f, 0.0f, 0.0f, 1.0f); // 绘制矩形 glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-1.0f, -1.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(1.0f, -1.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(1.0f, 1.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-1.0f, 1.0f); glEnd(); glutSwapBuffers(); } // 初始化函数 void init() { // 初始化 Shader initShader(); // 设置视口 glViewport(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT); } // 主函数 int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize(WINDOW_WIDTH, WINDOW_HEIGHT); glutCreateWindow("OpenGL Circle Effect"); init(); glutDisplayFunc(render); glutIdleFunc(render); glutMainLoop(); return 0; } ``` 希望这个示例代码对你有所帮助!如果你还有其他问题,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值