GLSL——绘制平面图形（一）

画圆

在上一期讲述smoothstep的时候，已经讲了如何绘制圆和圆环，在这里不做赘述，详情参照链接smoothstep画圆

画椭圆

画椭圆可以理解为对正圆进行x轴方向或者y轴方向的拉伸

对x轴拉伸

varying mediump vec2 texCoord0;void main()
{precision mediump float;//横坐标乘以纵横比写在vertexshader中
//    texCoord0.x *= (200.0/100.0);//圆心vec2 center = vec2(0.35, 0.5);//x轴拉伸texCoord0.x *= 0.7;//半径float radio = 0.3;//定义边缘区间float blur = 0.025;float d = distance(texCoord0, center);float d1 = 1.-smoothstep(radio - blur, radio, d); gl_FragColor = vec4(vec3(d1, 0., 0.), 1.);
}

效果图

对y轴拉伸

varying mediump vec2 texCoord0;void main()
{precision mediump float;//横坐标乘以纵横比写在vertexshader中
//    texCoord0.x *= (200.0/100.0);//圆心vec2 center = vec2(0.5, 0.35);//x轴拉伸texCoord0.y *= 0.7;//半径float radio = 0.3;//定义边缘区间float blur = 0.025;float d = distance(texCoord0, center);float d1 = 1.-smoothstep(radio - blur, radio, d); gl_FragColor = vec4(vec3(d1, 0., 0.), 1.);
}

效果图

画矩形

绘制矩形，就是在坐标限定在矩形四条边范围内着色，

利用if语句画矩形

void main()
{precision mediump float;//上下边界float top = 0.8;float bottom = 0.2;//左右边界float left = 0.2;float right = 0.8;float pct = 0.;if (texCoord0.x > left && texCoord0.x < right && texCoord0.y > bottom && texCoord0.y < top){pct = 0.;}else{   pct = 1.;}gl_FragColor = vec4(vec3(pct), 1.);
}

效果图

利用smoothstep函数，对边距进行着色，除边距以外的就是矩形

varying mediump vec2 texCoord0;void main()
{precision mediump float;float padding = 0.2;//上边距为白色float topColor = smoothstep(1. - padding, 1. - padding, texCoord0.y);//左边距为白色float leftColor = 1. - smoothstep(padding, padding, texCoord0.x);//下边距为白色 float buttomColor = 1. - smoothstep(padding, padding, texCoord0.y);//右边距为白色float rightColor = smoothstep(1. - padding, 1. - padding, texCoord0.x);float color = rightColor + leftColor + buttomColor + topColor;gl_FragColor = vec4(vec3(color), 1.);
}

效果图

使用smoothstep好处是，可以通过调整参数去除锯齿效果

平行四边形

画平行四边形，就意味着某两条边的间距是倾斜的，有两条边是倾斜的直线，相当于倾斜的边的直线满足方程ax+by-c=0，根据这个公式来描绘倾斜的边，参数b可以调整倾斜的角度，参数c可调整平行四边形的面积，以水平方向的平行四边形为例：

varying mediump vec2 texCoord0;void main()
{precision mediump float;float padding = 0.2;//上边距为白色float topColor = smoothstep(1. - padding, 1. - padding, texCoord0.y);//左边距为白色float leftColor = 1. - smoothstep(padding-0.018, padding, texCoord0.x + texCoord0.y*0.3-0.1);//下边距为白色 float buttomColor = 1. - smoothstep(padding, padding, texCoord0.y);//右边距为白色float rightColor = smoothstep(1. - padding-0.018, 1. - padding, texCoord0.x + texCoord0.y*0.3-0.1);float color = rightColor + leftColor + buttomColor + topColor;gl_FragColor = vec4(vec3(color), 1.);
}

效果图

以竖直方向的平行四边形为例

varying mediump vec2 texCoord0;void main()
{precision mediump float;float padding = 0.2;//上边距为白色float topColor = smoothstep(1. - padding - 0.018, 1. - padding, texCoord0.y + texCoord0.x*0.3 - 0.1);//左边距为白色float leftColor = 1. - smoothstep(padding - 0.018, padding, texCoord0.x);//下边距为白色 float buttomColor = 1. - smoothstep(padding - 0.018, padding, texCoord0.y + texCoord0.x*0.3 - 0.1);//右边距为白色float rightColor = smoothstep(1. - padding - 0.018, 1. - padding, texCoord0.x);float color = rightColor + leftColor + buttomColor + topColor;gl_FragColor = vec4(vec3(color), 1.);
}

效果图

画直线

相当于画两个大的矩形，中间留有空白间隔开，如，画一条0.01像素宽的直线，那么只需要花两个颜色相反的大小为0.49的矩形，并对这两个矩形进行混合，如下：

varying mediump vec2 texCoord0;void main()
{precision mediump float;//顶部是白色的矩形float top = smoothstep(0.49, 0.5, texCoord0.y);//顶部黑色的矩形float bottom = smoothstep(0.49, 0.5, 1. - texCoord0.y);//将两个混合float color = top * bottom;gl_FragColor = vec4(vec3(color), 1.);
}

效果图

画斜线

和画平行四边形一样，转换成二元一次方程的方式即可，如下：

varying mediump vec2 texCoord0;void main()
{precision mediump float;//顶部是白色的矩形float top = smoothstep(0.49, 0.5, texCoord0.y + texCoord0.x*0.2);//顶部黑色的矩形float bottom = smoothstep(0.49, 0.5, 1. - texCoord0.y - texCoord0.x*0.2);//将两个混合float color = top * bottom;gl_FragColor = vec4(vec3(color), 1.);
}

效果图

除此之外，也可以利用点到直线的距离进行绘制，已知两个点，根据两点式计算出直线的方程，并计算出点到直线的距离，根据点到直线的距离和线宽进行直线的绘制，如下：

varying mediump vec2 texCoord0;void main()
{precision mediump float;//定义两个点vec2 center1 = (0.2, 0.2);vec2 center2 = (0.8, 0.8);//两个点的半径float r1 = 0.03;float r2 = 0.03;vec3 cirColor1 = vec3(1., 0., 0.);vec3 LineColor = vec3(0., 0., 0.);//线宽float lineWidth = 0.01;//画两个点之间的直线float k = (center1.y - center2.y) / (center1.x - center2.x);float b = center1.y - k * center1.x;float d = abs(k * texCoord0.x - texCoord0.y + b) / sqrt(k * k + 1);if (d <= lineWidth){gl_FragColor = vec4(LineColor, 1.);}else{gl_FragColor = vec4(1., 1., 1., 1);}//画两个点if (length(texCoord0 - center1) <= r1 || length(texCoord0 - center2) <= r2){gl_FragColor = vec4(cirColor1, 1);}
}

效果图

GLSL——绘制平面图形（一）相关推荐

GLSL——绘制平面图形（二）
画smoothstep的平滑曲线在常用内建函数与应用中介绍了smoothstep函数,那么如何画这个函数的曲线呢? 方法1:利用smoothstep函数获取方程,然后点到方程上的距离划线 varyi ...
音视频开发系列(34) OpenGL ES 绘制平面图形
我们前两篇介绍了OpenGL ES 基本概念和GLSL及Shader的渲染流程,这篇我们开始实战,通过GLSurfaceView加载着色器,来绘制三角形.正方形和直线这些平面图形.在实践过程中遇到的问 ...
matlab入门教程四 ----- 绘制平面图形
一.图形的绘制对于下面的图形,已经给出了代码与详细注释,并没有给出具体画出的图形,建议初学者自己敲一下代码实现正确的图形显示 1.绘制平面图形 1.1 绘制向量折线图 x = [1, 3, 2 ,9 ...
安卓学习笔记37：利用OpenGL ES绘制平面图形
文章目录零.学习目标一.OpenGL概述二.了解三维直角坐标系三.案例演示 - 绘制三角形 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawTriangle] 2.建模:创建三角形类 ...
scratch编程-绘制平面图形
文章目录 1.等边三角形 2.等腰三角形 3.直角三角形 4.平行四边形 5.长方形 6.正方形 7.梯形 9.菱形 10.六边形重点:面向90度与左转90度的区别 1.等边三角形逻辑思路:当 ...
Android OpenGL ES 学习(二) -- 图形渲染管线和GLSL
OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学 ...
安卓学习笔记38：利用OpenGL ES绘制旋转立方体
文章目录零.学习目标一.绘制图形基本步骤二.绘制旋转立方体 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawRotatingCube] 2.建模:立方体类 - Cube 3.渲染:立方 ...
Mathematica绘制图形
绘制平面图形的命令 Plot 显函数绘图 ParametricPlot 参数方程绘图 PolarPlot 极坐标方程绘图 ContourPlot 隐函数绘图 ListPlot 绘制点列图例 Plot ...
计算机动画算法与编程基础pdf,清华大学计算机动画算法与编程基础2-图形绘制课件.ppt...
文档介绍: 计算机动画算法与编程基础第二章图形绘制一.空间点的绘制最简单的计算机图形就是在屏幕上某个位置绘制一个点,并用特定的颜色绘制出来. glBegin(GL_POINTS); glVertex3 ...

GLSL——绘制平面图形（一）

GLSL——绘制平面图形（一）相关推荐

最新文章

热门文章