一个可实时调试webgl1 shader的软渲染库实现

Creator 3.x
#1

如题,大家应该知道 shader是运行在gpu上的,没法很好的像我们平时那样进行调试.所以几年前我就突然萌生了一个想法,也是初生牛犊不怕虎.既然shader是运行在gpu上的,是否我们在cpu上进行一次模拟,就可以实现shader的实时渲染调试了？

说干就干,要解决的问题拆解出来其实分2大步.
1 将shader的 glsl的代码通过ast 进行拆分 再将其自动转换为 ts代码.以实现代码的断点调试.
2 实现所有webgl1的接口, 将对webgl1的接口调用全部转为对自己的软渲染器代码调用.
以上只要实现了这两点,基本就可以实现webgl shader代码.
先来看第一点
原版glsl代码
image
自动转换后的ts代码:
image image image
这样我们基本就实现了一个glsl转ts的框架

第2点 我们hack一下webgl的代码调用
image
可以设定为将shader代码转换为ts或者直接将内部glsl的调用直接转换为对我们软渲染器的调用.
以上,就可以初步实现webgl1 shader的软渲染调试实现.
来看一段针对顶点着色器的渲染调试
软渲染实现

当然,以上两点说起来容易,做起来千难万难,之后也因为总总原因没有继续完善,大家有兴趣的话,也可以研究看看.
如果以后有空,大家有意愿的话。我也给大家好好讲一下内部的一些具体实现.谢谢大家.
另外在打一个小广告,希望大家给我的独立游戏打败黑黑怪兽的稻草人加个愿望单,谢谢大家.

Steam页面：https://store.steampowered.com/app/2607160/_/
哔哩哔哩页面: https://www.bilibili.com/video/BV1e94y1u7dm

6赞
#2

真的太牛逼了，可以开源吗

#3

本身是开源的 但是也是因为之前改的太乱了一直没空整理代码 不太好意思发出来给大家看

#4

如果感兴趣的人比较多且条件允许的情况下,后期我看下,是不是一边发帖讲解一下具体原理,一边把代码整理一下开源出来给大家看看.另外,大家多多支持一下我的游戏,加个愿望单也好.谢谢大家.

#5

np123

#6

如果,如果可以的话,像这样干货技术贴请来多一点.

#7

:joy:想看的人不多

#8

厉害啊，支持开源，挺有用的。

#9

大佬牛逼，期待大佬的成品

#10

表示想看，虽然可能看不懂

#11

大家想看哪个部分的 ？glsl转ts 还是 软渲染的实现？我看看之后有没有时间找其中一个讲一下。
另外也请大家多多支持下我的游戏，添加下愿望单哦。