天天看点

Shader调试

打印消息调试是我们常用的一种调试方式,但是cocos中或者说webgl中调试开发shader这种方法就不奏效了。

实现思路,总和了网上的方法,自己重新写了一个,首先在在面板中绘制一个打印区域

Shader调试

初定区域为200 X 50,颜色为白色:

vec4 bgColor = vec4(1.0,1.0,1.0,1.0);

所有我们只需要将坐标

x<=200 && y<=50

的位置绘制成白色:

gl_FragColor = bgColor;

位置坐标:在顶点作色器中我们有绘制的位置坐标

attribute vec4 a_position;

所以绘制这个白色面板的条件解决了。

接下来我们需要绘制数字:0、1、2、3、4、5、6、7、8、9

首先确定一个数字的大小区域:

Shader调试

16x16

字体的粗细:2

0:

Shader调试
Shader调试

1: 中间一竖

2: …

.

.

.

9:

也就是有了数字的坐标,大小,字体粗细,我们就可以确定一个数字的绘制样式

最后的样子大概是这样的

Shader调试
Shader调试

我把数字设定在中间也就是又有的y周坐标都是白色板子的中间50/2 = 25

数字x坐标本别是:8、26、26+16, 26+16+16、、、、、、、

应为字体大小是16所以第一个字的中心坐标是(8,25),后面的每加一个字,x坐标往右移动一个字大小所以每次加16

自己实现了一下,不知道什么问题,支持的位数不多,可以参考一下

参考实现

https://download.csdn.net/download/u013791665/10301632

继续阅读