天天看點

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

繼續閱讀