這個輔助的系統在瀏覽器環境下運行，用於快速預覽和測試片段着色器。
下載資源鏈接(如果找不到，可能還未通過審覈。如有不便請留言, 實在下載不了請加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 這個文件默認情況下加載請求找不到這個文件，瀏覽器可能會報 "攔截跨源請求" 相關的錯誤.
有任何疑問請留言.
感謝:)
直接運行成功後的畫面如下:
