博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
love2d教程11--着色器
阅读量:6358 次
发布时间:2019-06-23

本文共 3887 字,大约阅读时间需要 12 分钟。

love虽然没有提供直接操纵顶点颜色的函数,但是提供了和glsl-1.2(opengl着色语言)兼容的pixeleffect. 这相当于鸟枪换炮,当然先应的难度也加大了.什么是着色语言?它是在显卡上执行的可编程渲染管线(显卡在处理 数据的时候是按照一个固定的顺序来的,而且严格按照这个顺序,所以叫管线),具体见 .

glsl还是比较复杂的,这里是csdn上的一系列. 我只是大致看了一下,也没动手,不过在love2d官方论坛找到了一些示例.

下面大概说明一下glsl.

glsl分为顶点着色器和片元着色器. 数据类型有

基础类

int,float

向量类

vec2、vec3、vec4 (float vector)
ivec2、ivec3、ivec4 (int vector)
bvec2、bvec3、bvec4 (bool vector)
mat2、mat3、mat4 (float matrix)

纹理类

sampler1D、 sampler2D、 sampler3D、
samplerCube、sampler1DShadow、
sampler2DShadow

变量修饰符,详见这篇

uniform 用户自定义的图元属性,用于从OpenGL程序传送属性数据给Vertex Shader、Fragment Shader,在GLSL中只读.

varying:用于从Vertex Shader向Fragment Shader传送插值数据,需要在这两个Shader中均需要声明。Vertex Shader中可写,在Fragment Shader中只读。

attribute:用户自定义的顶点属性,用于从OpenGL程序传送属性数据给Vertex Shader,在GLSL中只读.

注意在love里修改了一些名称如下

glsl love
float number
sampler2d image
uniform extern
texture2d(tex, uv) texel(tex, uv)

在love里pixeleffect的使用可以分为三步:

1.创建效果
effect=love.graphics.newPixelEffect[[
//glsl着色语言,glsl类c,注释用"//"
]]
2.使用效果
love.graphics.setPixelEffect(effect)
--绘图代码
love.graphics.setPixelEffect()--注意还原默认效果
3.若需要传单参数可以
effect:send()
注意每个effect必须有一个名为"effect"的函数即vec4 effect( vec4 color, image texture, vec2 texture_coords, vec2 screen_coords ).

下面我们通过一个去除图片背景和颜色例子,来看一下pixeleffect的强大功能. (代码修改自love官方论坛)

按"r"去除背景,按"c"颜色变换.(左为原图,右为变换后图)

function love.load()    --为了方便书写    gr, li, lf    = love.graphics, love.image, love.filesystem    image            = gr.newImage('Love.jpg')    width, height    = gr.getWidth(), gr.getHeight()    effect = gr.newPixelEffect [[        extern vec4 Cmin;        extern vec4 Cmax;        vec4 effect(vec4 color,Image tex,vec2 tc,vec2 pc)        {    vec4 pixel = Texel(tex,tc);            //vec4的四个分量分别是r,g,b,a            //下面把图片在cmax和cmin之间的像素的alpha分量设为0,即透明            if ((pixel.r<=Cmax.r && pixel.r>=Cmin.r) &&                (pixel.g<=Cmax.g && pixel.g>=Cmin.g) &&                (pixel.b<=Cmax.b && pixel.b>=Cmin.b))            {pixel.a        = 0;}            return pixel;        }        ]]    --需要移除的像素范围,这与具体的图片相关,如此图,背景为蓝色,主体为粉红,    --除了红色分量处的alpha不变,其他分量处的alpha都设为0    remove_range = {        r = { 0, 125 },        g = { 0, 255 },        b = { 0, 255 }        }    --opengl的颜色范围0.0--1.0,值越小表明此分量占的比例越小    remove_min = {remove_range.r[1]/255,remove_range.g[1]/255,remove_range.b[1]/255,1}    remove_max = {remove_range.r[2]/255,remove_range.g[2]/255,remove_range.b[2]/255,1}    effect:send('Cmin',remove_min) --向cmin传值    effect:send('Cmax',remove_max)    remove = false --透明变换开关    -- 颜色变换效果    effect2= love.graphics.newPixelEffect [[        extern number time;        vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)        {        //这些函数为了保证值在0.0--1.0之间,三角函数取值为-1.0--1.0            return vec4((1.0+sin(time))/2.0, abs(cos(time)), abs(sin(time)), 1.0);        }    ]]    change=false --颜色变换开关endfunction love.draw()    --由于love是按先后顺序绘图,如果图片不透明,此据会被挡住    gr.print('you can not see this ,before the img transparented',10,40)    if remove then        gr.setPixelEffect( effect )        gr.draw( image )        gr.setPixelEffect() --还原默认的效果        else        gr.draw( image )    end    if change then        gr.setPixelEffect(effect2)        gr.rectangle('fill', 10,305,790,285)        gr.setPixelEffect()    end    gr.print( 'Press 
to change background to transparent.', 10, 10) gr.print( 'Press
to see the beautiful color.', 10, 25)endlocal t=0function love.update(dt) t = t + dt effect2:send("time", t)endfunction love.keypressed(key) if key == 'escape' then love.event.push( 'quit' ) end if key=="c" then change = not change end if key == 'r' then remove = not remove endend

glsl功能非常多,演示的也只是皮毛,它可以用来做,, 运动模糊,灰度/反转/复古色/任何种类的色彩效果,反射/折射/扭曲等等!

其文档我放到了doc文件夹下(英文),大家可以参考.

代码下载,已clone的直接git pull

git clone git://gitcafe.com/dwdcth/love2d-tutor.git
或git clone https://github.com/dwdcth/mylove2d-tutor-in-chinese.git

转载地址:http://tnfma.baihongyu.com/

你可能感兴趣的文章
Moving to Docker(二)搭建一个私有registry服务
查看>>
开发者可以使用Docker做什么?
查看>>
网络监控神器!这7大免费开源工具可别错过
查看>>
高德地图POI升维 打通阿里电商数据
查看>>
CloudCC神州云动带领首批合作伙伴步入CRM生态
查看>>
中国人工智能学会通讯——构建强健的人工智能:原因及方式 4. 检测异常
查看>>
网安事故屡禁不止 四大因素不容忽视
查看>>
前 LinkedIn 高级总监张溪梦:6 个步骤,学会数据驱动产品的秘诀
查看>>
Outlook.com高级版优惠价截止日顺延到6月30日
查看>>
CMOS感光元件市场谁是老大?索尼笑而不语
查看>>
浅析基于客户价值的客户关系管理
查看>>
大数据产业成机构布局重点
查看>>
大数据产业驱动中国经济新增长
查看>>
《SQL入门经典(第5版)》一一6.3 事务控制与数据库性能
查看>>
《Microsoft.NET企业级应用架构设计(第2版)》——1.4 笑到最后
查看>>
怎样才能自学好Java?
查看>>
《无线网络:理解和应对互联网环境下网络互连所带来的挑战》——2.9 蓝牙SIG...
查看>>
《OpenACC并行编程实战》—— 第3章 OpenACC计算构件 3.1 条件编译
查看>>
css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?...
查看>>
《DB2性能管理与实战》——2.6 DB2 pureScale环境中内存管理
查看>>