渲染画(笑脸怎么画)

@TOC目录开始学习ShaderToy,往往不知所措,看不太懂;不容易懂,背后全是数学公式;请看这篇了解一下原理和基础。实践方法:请打开网站https://www.shadertoy.com,点击新建开始实验。完成一个圆的渲染首先把下列代码贴入voidmainImage(outvec4fragColor,invec2fragCoord){vec2uv=…

大家好,又见面了,我是你们的朋友全栈君。

开始学习ShaderToy, 往往不知所措,看不太懂;不容易懂,背后全是数学公式;请看这篇了解一下原理和基础。

实践方法:请打开网站
https://www.shadertoy.com,点击新建开始实验。

完成一个圆的渲染

首先把下列代码贴入

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{ 
   
    vec2 uv = fragCoord/iResolution.xy;
    
    float d = length(uv);
    float c = d;
    
    fragColor = vec4(vec3(c), 1.0);
}

解释:这是ShaderToy的主函数,参数一个入,一个出。输入的像素坐标向量,输出的是像素的颜色向量。主要作用就是根据屏幕上的像素坐标,算出像素的颜色向量,简单来说完成像素坐标到颜色的变换或者是映射。屏幕分辨率是800乘600的话,就计算800乘600区域内的所有像素。ShaderToy当前窗口的每个像素坐标都要经过这个主函数的处理以决定其颜色,所以看似这个主程序是一段代码,其实逻辑上被嵌在了一个像素坐标的大循环里面

uv这里做了归一化处理, uv.x, uv.y的取值都在0~1;

length函数是求向量的模,即是 ( u v . x ) 2 + ( u v . y ) 2 \sqrt {(uv.x)^2+(uv.y)^2} (uv.x)2+(uv.y)2
,其实这是空间符号距离函数SDF的雏形,这个公式可以理解为向量到原点 向量 v e c 3 ( 0 , 0 , 0 ) vec3(0,0,0) vec3(0,0,0)的距离;还有向量里各分量的值类型一般都是float类型,所以在赋值时要加小数点。

vec3©:只给出一个值c,表示这个向量的 x , y , z x,y,z x,y,z都是c,即是 v e c 3 ( c , c , c ) vec3(c,c,c) vec3(c,c,c),类似Python的Numpy里多维数组的广播性质。

fragColor = vec4(vec3(c), 1.0);,这一行返回的是一个4维向量,由 r g b a rgba rgba 四个元素组成.对基本的颜色要有一点直观感知,例如vec4(1.,1.,1.,1.)是白色;vec4(0.,0.,0.,1.)是黑色。
在这里插入图片描述

认识图:屏幕像素坐标原点 v e c 2 ( 0 , 0 ) vec2(0,0) vec2(0,0) 映射出来的颜色是黑色。向右向上逐渐变淡,1/4椭圆外是白色,屏幕的颜色时白色和黑色,以及这两者之间的过渡色,这是由返回的向量rgb三个元素取值一样决定的。

把原点移到屏幕中心
通过改变uv的取值范围,将黑点移动到屏幕中心

uv -=.5; // uv取值范围:-.5 <> .5

在这里插入图片描述
认识图:屏幕被黑灰色覆盖,相当于把第一张图作了一个平移。

人工干预颜色
把屏幕的颜色分成黑白两色,通过:

if(d < .3) c=1.; else c = 0.;

在这里插入图片描述
椭圆变圆
把椭圆变成圆,通过调整x方向的比例:

uv.x *= iResolution.x/iResolution.y;

在这里插入图片描述边缘平滑
可以看打边缘有细微锯齿,不平滑,需要引入平滑函数smoothstep:
理解float d = length(uv);,这个可以理解为uv向量的长度,可以认为是到原点的距离,在当前的情况下,原点就是白圆的圆心,这个距离函数d就是离圆心的距离。所以,我们可以定义一个变量r,用来表示半径

float r = .3;
if(d < r) c=1.; else c = 0.;

引入平滑函数smoothstep, 让c的取值落在r-0.02和r之间:

//if(d < r) c=1.; else c = 0.;
c = smoothstep(r, r-0.02, d);

在这里插入图片描述

可以试着调整r以及其他值观察效果
完整代码:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv -=0.5;
    
    uv.x *= iResolution.x/iResolution.y;
    
    float d = length(uv);
	float c = d;
    float r = .3;
    
    c = smoothstep(r, r-0.02, d);
    
    fragColor = vec4(vec3(c), 1.0);
}

制作笑脸

最终效果图如下:
在这里插入图片描述代码优化
首先优化一下画圆函数,写成一个功能函数,同时加入一个参数,让圆心随向量p的指定发生改变:

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

主程序代码:

vec2 uv = fragCoord/iResolution.xy;
uv -=0.5;
uv.x *= iResolution.x/iResolution.y;

vec2 p = vec2(.2, -.1);
float c = Circle(uv, p, .4, .05);
c = Circle(uv, vec2(-.5, .2), .1, .01);

fragColor = vec4(vec3(c), 1.0);

第二个圆覆盖了第一个。

在这里插入图片描述

c = Circle(uv, vec2(-.5, .2), .1, .01);代码改一下,改为相加,再看效果
注意:这优点类型光线追踪里CSG的做法,构建复杂几何实体的几个基本操作

c += Circle(uv, vec2(-.5, .2), .1, .01);

在这里插入图片描述试一下相减操作。

c -= Circle(uv, vec2(.1, .1), .07, .01);

在这里插入图片描述再加一个圆

float c = Circle(uv, vec2(0.), .4, .05);
c -= Circle(uv, vec2(-.13, .2), .07, .01);
c -= Circle(uv, vec2(.13, .2), .07, .01);

效果:
在这里插入图片描述
颜色变换

float mask = Circle(uv, vec2(0.), .4, .05);
mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);

vec3 col = vec3(1., 1., 0.) * mask;
fragColor = vec4(col, 1.0);

效果如下:
在这里插入图片描述
制作月牙
同样适用两个圆相减的方式。

float mask = Circle(uv, vec2(0.), .4, .05);
mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);

float mouth = Circle(uv, vec2(0.), .3, .02);

mouth -= Circle(uv, vec2(0.,0.1), .3, .02);

vec3 col = vec3(mouth);

fragColor = vec4(col, 1.0);

效果
在这里插入图片描述
调整代码,生成笑脸:

float mask = Circle(uv, vec2(0.), .4, .05);
mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);

float mouth = Circle(uv, vec2(0.), .3, .02);

mouth -= Circle(uv, vec2(0.,0.1), .3, .02);

mask -= mouth;

vec3 col = vec3(1., 1., 0.) * mask;

fragColor = vec4(col, 1.0);

效果
在这里插入图片描述

优化代码,增加缩放和移动功能

通过uv来实现

float Circle(vec2 uv, vec2 p, float r, float blur) {
	float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

float Smiley(vec2 uv, vec2 p, float size) {
    uv -= p;
    uv /= size;
    
    float mask = Circle(uv, vec2(0.), .4, .05); 
    mask -= Circle(uv, vec2(-.13, .2), .07, .01);
    mask -= Circle(uv, vec2(.13, .2), .07, .01);
    
    float mouth = Circle(uv, vec2(0., 0.), .3, .02);
    mouth -= Circle(uv, vec2(0., .1), .3, .02);
    
    mask -= mouth;

    return mask;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -=0.5;
    uv.x *= iResolution.x / iResolution.y;
    
    vec3 col = vec3(0.);
    float mask = Smiley(uv, vec2(0.02), .5);
    col = vec3(1., 1., 0.)*mask;
    
    fragColor = vec4(col,1.0);
}

效果图:

在这里插入图片描述

让笑脸动起来

通过把系统时间加入进来,并通过正弦、余弦函数改变笑脸位置,使其动起来,完整代码如下:

float Circle(vec2 uv, vec2 p, float r, float blur) { 

float d = length(uv-p);
float c = smoothstep(r, r-blur, d);
return c;
}
float Smiley(vec2 uv, vec2 p, float size) { 

uv -= p;
uv /= size;
float mask = Circle(uv, vec2(0.), .4, .05);
mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);
float mouth = Circle(uv, vec2(0., 0.), .3, .02);
mouth -= Circle(uv, vec2(0., .1), .3, .02);
mask -= mouth;
return mask;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{ 

// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
uv -=0.5;
uv.x *= iResolution.x / iResolution.y;
vec3 col = vec3(0.);
float t = iTime;
vec2 p = vec2(sin(t)*.7, cos(t)*0.3);
float mask = Smiley(uv, p, .3);
col = vec3(1., 1., 0.)*mask;
fragColor = vec4(col,1.0);
}

小结

1、大致了解了ShaderToy程序的工作原理
2、了解图形之间的加减操作,了解CSG是构造复杂集合图形的方法
3、初步实现动画效果

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128141.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Kettle工具入门[通俗易懂]

    Kettle工具入门[通俗易懂]Kettle工具入门Kettle工具入门 Kettle是什么? 为什么要用Kettle? 怎么用Kettle? 下载运行 简单应用 表到表转换 json到表的操作 参考 Kettle是什么?Kettle是水壶。“多喝热水”是我们对女朋友美好的祝福。因为未经处理的生水(原始数据),含有各种杂质(脏数据),无法直接饮用(入…

    2022年10月17日
  • AGI:走向通用人工智能的【生命学&哲学&科学】第一篇——生命、意识、五行、易经、量子

    AGI:走向通用人工智能的【生命学&哲学&科学】第一篇——生命、意识、五行、易经、量子AGI:走向通用人工智能的【生命学&哲学&科学】第一篇——生命、意识、五行、易经、量子经典的物理统一在原子上,量子的物理统一在量子上,化学统一在元素上,而生命统一在DNA上,DNA本身拆干了,其实就是一群元素,按照经典物理和量子物理所进行的组合。科学本质上是一种经验主义的认识论,属于哲学的一个分支。量子理论,要通过哲学语言,量子属于形而上看不到、摸不着的东西。元气的基本五行,是世界万物的行成与演变的方式。生命的本质是化学,化学的本质是物理,物理的本质用数学描述,数学的本质是由我们的某种语言写出

  • 什么是堡垒机?为什么需要堡垒机?

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:猿话 www.toutiao.com/i6881462700229329421 什么是堡垒机 堡垒机,即在一个…

  • linux重启网卡的命令行,linux系统怎么重启网卡?linux重启网卡的三种教程

    linux重启网卡的命令行,linux系统怎么重启网卡?linux重启网卡的三种教程在实际工作中,经常会遇到Linux系统进行重启网卡的操作。在这里整理一下,进行多种方法的网卡重启。一、servicenetworkrestart1、首先用CRT工具连接到Linux命令行界面。或者进入操作系统界面,选择终端输入。2、如果我们对所有的网卡进行重启操作。可以尝试输入:servicenetworkrestart命令进行操作。3、样就完成了用servicenetworkr…

  • Win7如何解决telnet不是内部或外部命令的方案!听语音

    Win7如何解决telnet不是内部或外部命令的方案!听语音

  • linux查看日志方法

    linux查看日志方法linux日志查看tail、head、cat、tac、sed、less、echo1、命令格式:tail[必要参数][选择参数][文件]-f循环读取-q不显示处理信息-v显示详细的处理信息-c<数目>显示的字节数-n<行数>显示行数-q,–quiet,–silent从不输出给出文件名的首部-s,–sleep-interval=S与-f合用,表示在每次反复的间隔休眠S秒tail-n…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号