shader 调试工具: 可观察 shader 内部的变量值

配套Codea 代码:
-- Shader debug
displayMode(OVERLAY)
function setup()
m = mesh()
m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
m.shader = shader(myShader.vsBase,myShader.fsBase)
-- m.texture = "Documents:univer"
m:setColors(color(220,200,200,255))
parameter.watch("m.shader.modelViewProjection")
parameter.watch("m.shader.uResolution")
parameter.watch("m.vertices[1]")
end
function draw()
background(0)
m:draw()
end
function touched(touch)
end
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Shader代码:
myShader = {
vsBase = [[
// vertex shader 代码
uniform mat4 modelViewProjection;
uniform vec2 uResolution;
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
void main() {
vColor=color;
vTexCoord = texCoord;
gl_Position = modelViewProjection * position;
}
]],
fsBase = [[
// fragment shader 代码
precision highp float;
uniform lowp sampler2D texture;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
float x = vTexCoord.x;
float y = vTexCoord.y;
void ledChar(int,float,float,float,float);
void ledRectChar(int,float,float,float,float);
void showInt(int);
void showFloat(float);
bool inRect(float,float,float,float);
void main() {
lowp vec4 col = texture2D( texture, vTexCoord ) * vColor;
// 默认全部设置为黑色
gl_FragColor = vec4(.1,.1,.1,1);
showFloat(-.1111111);
//showFloat(float(-9765));
}
void showFloat(float f){
int myNum[20];
int k = 0;
int iPart = int(floor(abs(f)));
int fPart = int(fract(abs(f))*100000.0);
float m=0.86;
// 初始化数组,全部置为代表黑色的12
for(int i=0; i<20; i++){
myNum[i] = 12;
}
// 插入小数部分
while (fPart>0)
{
// 从个位开始, 依次取出个位,十位,百位,千位...的数字值
myNum[k++]=fPart-((fPart/10)*10);
fPart=fPart/10;
}
// 如果是0
if(f==0.0){myNum[k++] = 0;}
// 插入小数点
myNum[k++] = 10;
// 插入整数部分
while (iPart>0)
{
myNum[k++]=iPart-((iPart/10)*10);
iPart=iPart/10;
}
// 如果是负数,则插入代表负号的11
if(f<0.0) { myNum[k++]=11;}
// 循环输出数字数组
for(int i=0; i<20; i++)
{
m = m-0.03;
ledRectChar(myNum[i], m, 0.02, 0.6, 0.15);
}
}
bool inRect(float x1,float x2, float y1, float y2){
if(x>x1 && x<x2 && y>y1 && y<y2) { return true; } else { return false; }
}
void ledRectChar(int n, float xa,float xb, float ya, float yb){
float x1 = xa;
float x2 = xa+xb;
float y1 = ya;
float y2 = ya+yb;
float ox = (x2+x1)/2.0;
float oy = (y2+y1)/2.0;
float dx = (x2-x1)/10.0;
float dy = (y2-y1)/10.0;
float b = (x2-x1)/20.0;
int num = n;
// 设定调试区显示范围
if(x >= x1 && x <= x2 && y >= y1 && y <= y2) {
// 设置调试区背景色
gl_FragColor = vec4(0.2,1.0,0.2,1.0);
// 分别绘制出 LED 形式的数字 1~0 , 用黑色绘制1个或2个矩形,由矩形以外的绿色区域组成字型
if((num==1 && (inRect(x1,ox-dx,y1,y2) || inRect(ox+dx,x2,y1,y2))) ||
(num==2 && (inRect(x1,x2-dx,oy+dy/2.0,y2-dy) || inRect(x1+dx,x2,y1+dy,oy-dy/2.0))) ||
(num==3 && (inRect(x1,x2-dx,oy+dy/2.0,y2-dy) || inRect(x1,x2-dx,y1+dy,oy-dy/2.0))) ||
(num==4 && (inRect(x1+dx,x2-dx,oy+dy/2.0,y2) || inRect(x1,x2-dx,y1,oy-dy/2.0))) ||
(num==5 && (inRect(x1+dx,x2,oy+dy/2.0,y2-dy) || inRect(x1,x2-dx,y1+dy,oy-dy/2.0))) ||
(num==6 && (inRect(x1+dx,x2,oy+dy/2.0,y2-dy) || inRect(x1+dx,x2-dx,y1+dy,oy-dy))) ||
(num==7 && inRect(x1,x2-dx,y1,y2-dy)) ||
(num==8 && (inRect(x1+dx,x2-dx,oy+dy/2.0,y2-dy) || inRect(x1+dx,x2-dx,y1+dy,oy-dy/2.0))) ||
(num==9 && (inRect(x1+dx,x2-dx,oy+dy/2.0,y2-dy) || inRect(x1,x2-dx,y1+dy,oy-dy/2.0))) ||
(num==0 && inRect(x1+dx,x2-dx,y1+dy,y2-dy)) ||
// 传入10则绘制小数点, 传入11则绘制负号, 传入12则清空
(num==10 && (inRect(x1,x2,oy-dy,y2) || inRect(x1,ox-dx*2.0,y1,oy-dy) || inRect(ox+dx*2.0,x2,y1,oy-dy) )) ||
(num==11 && (inRect(x1,x2,oy+dy,y2) || inRect(x1,x2,y1,oy-dy))) ||
(num==12)
)
{
gl_FragColor = vec4(0,0,0,.5);
}
}
}
]]
}

说明:
shader程序调试起来比较麻烦, 尤其是无法使用常见的 print 之类的命令来打印输出内部变量的值, 所以想办法写了这么一个调试工具原型, 主要就是那个 showFloat 函数, 可以方便地查看变量值.
目前问题:
1. 就是效率比较低下, 能让FPS从60降到3, 基本没做过什么优化, 勉强够用;
2.有个BUG, 连续两次显式调用这个函数会产生花屏, 但是把它放在一个循环中使用就没问题, 还没找到原因.
使用方法
把全局变量和该函数的声明和实现拷贝到 fragment shader 的代码中, 直接在 main 函数中调用即可, 如下所示:
显示整数
正整数
shoufloat(float(2345));
负整数
shoufloat(float(2345));
显示浮点数
浮点数
shoufloat(.2345));
shoufloat(1234.345);
shoufloat(-1234.345);
显示0
shoufloat(.0);