快速实现GLSL Shader(支持GLES2/GLES3)的一个辅助小系统(源码下载)

这个辅助的系统在浏览器环境下运行，用于快速预览和测试片段着色器。

下载资源链接(如果找不到，可能还未通过审核。如有不便请留言, 实在下载不了请加QQ群: 722973433):

https://download.csdn.net/download/vily_lei/10795631

下载之后解压缩，请看ReadMe.

本系统简洁轻巧,用于快速实现基于glsl es2/es3 的demo以方便学习或者测试算法或者排查相关Bug。
运行此系统必须在支持对应WebGL版本的浏览器上运行glslDemo.html即可(本地直接运行)
本系统在 Google Chrome,Mozilla Firefox,360浏览器下均测试过, 默认包含了几个Shader demo。

如果在本地直接运行不了,请在对应浏览器的应用程序属性中 -> 目标 输入框中加入 --allow-file-access-from-files即可

以Windows下Google Chrome浏览器为例如图:

*** 解压缩后文件系统说明:

glslDemo.html ---------    为浏览器的主文件, 建议使用新版的Google Chrome或者Mozilla Firefox浏览器

codeDemo.js -----------    渲染系统和加载名为 demo.c 的glsl shader文件及其资源的系统

demo.c ---------------- 可以默认被此系统直接调用的片段着色器源文件, 当然你可以在glslDemo.html这个文件中改名字

其他文件为shader示例和相关图片(纹理)资源,以及说明图示图片

*** Shader结构说明:

uniform vec4 u_param; 这个变量名已经被此系统占用,存放的值为: 
        u_param.xy: (stageWidth,stageHeight), u_param.z>1.0: 表示mouse_down,u_param.z<1.0: 表示mouse_up

uniform vec4 u_mouse; 这个变量名已经被此系统占用,存放的值为: 
        u_mouse.x: mouse x offset from mouseDown position x,
        u_mouse.y: mouse y offset from mouseDown position y,
        u_mouse.z: mouse x accumulation from mouseDown position x,
        u_mouse.w: mouse y accumulation from mouseDown position y
        注意这里的值都是以实际设备像素为单位的
skyAndSun.c 和 tinselFlower.c 都有使用鼠标，可以参考这两个示例

*** 关于使用纹理:

如果使用的是1个纹理，定义方式为:
        uniform sampler2D u_sampler0;

如果使用的是2个纹理，定义方式为:
        uniform sampler2D u_sampler0;
        uniform sampler2D u_sampler1;

如果使用的是3个纹理，定义方式为:
        uniform sampler2D u_sampler0;
        uniform sampler2D u_sampler1;
        uniform sampler2D u_sampler2;
这里的纹理 uniform 名只能是 _sampler0 -> _sampler7

当然类型可以是 sampler2D 也可以是 samplerCube 类型的
关于 samplerCube 纹理请见: cubeTexDemo.c示例shader和 Cube纹理使用样例图示.jpg

其他使用方式请见示例和相关说明图片.

*** 如果运行某些Shader比较卡，请缩小窗口.
*** 在Google Chrome 下按快捷键 F12 可查看打印或者资源信息
*** 如果运行时当前目录下没有 demo.c 这个文件默认情况下加载请求找不到这个文件，浏览器可能会报 "拦截跨源请求" 相关的错误.

有任何疑问请留言.

感谢:)

直接运行成功后的画面如下: