快捷導(dǎo)航

three.js引入glsl文件并高亮顯示代碼的完整步驟

更新時(shí)間：2022年03月19日 11:42:57 作者：進(jìn)華

這篇文章主要給大家介紹了關(guān)于three.js引入glsl文件并高亮顯示代碼的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

同一個(gè)js文件中引入glsl

在three.js中自己寫shader語(yǔ)言的時(shí)候，我們需要把glsl與JavaScript兩種語(yǔ)言結(jié)合起來(lái)，即在ShaderMaterial中傳入對(duì)象，從而引入shader。實(shí)際上，對(duì)象中的vertexShader和fragmentShader兩屬性的值是String，所以最簡(jiǎn)單的辦法就是將整個(gè)shader代碼作為字符串：

//vertexShader字符串
const vertexShader = `
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;

//fragmentShdaer字符串
const fragmentShader = `
void main() {
            gl_Fragment = vec4(1.,0.,0.,1.);
        }
`;

//作為值傳入對(duì)象的vertexShader,fragmentShader屬性
const material = new THREE.ShaderMaterial({
    vertexShader, //鍵值對(duì)同名，可省略值
    fragmentShder,
})

glsl文件與js文件分開

這樣在three.js中引入shader語(yǔ)言當(dāng)然可以運(yùn)行，但問題在于這樣shader語(yǔ)言和JavaScript原因在同一個(gè)文件夾中，不好管理，我們需要將js文件和glsl文件單獨(dú)成兩個(gè)文件，最好形成如下的文件結(jié)構(gòu)：

（1）shader文件夾
vertexShader.glsl
fragmentShader.glsl
（2）app.js
（3）index.html

但問題在于js并不能importglsl文件，所以我能只好將.glsl改成.js，將shader語(yǔ)言作為js的字符串進(jìn)行import，上述的文件結(jié)構(gòu)就變成了：

（1）shader文件夾
vertexShader.js
fragmentShader.js
（2）app.js
（3）index.html

//vertexShader.js
const vertexShader = `
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;
export default vertexShader;

//app.js
import vertexShader from './shader/vertexShader.js';
import fragmentShader from './shader/fragmentShader.js';

確實(shí)這樣就將js文件和glsl文件分開了，但是這樣shader語(yǔ)言以字符串導(dǎo)入到j(luò)s中，其本身沒有問題，因?yàn)樵趈s中，shader就是以一段字符串傳的形式給GPU。但一個(gè)問題在于，我們?cè)诰庉嬈髦锌吹降膕hader語(yǔ)言沒有高亮，因?yàn)樗鼈冎皇且欢巫址恳粯宇伾?，這是非常不方便的。

高亮顯示glsl代碼

這里需要下載插件Comment target templates.

使用步驟非常簡(jiǎn)單，只需加上/*glsl*/,告訴插件字符串里的東西是glsl語(yǔ)言：

//vertexShader.js
const vertexShader = /*glsl*/`
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;
export default vertexShader;

最終在vscode中的顯示效果：

當(dāng)然在three.js中引入shader語(yǔ)言的方式有很多，也可以放到html中，放在<script>標(biāo)簽里面。插件Comment target templates讓shader語(yǔ)言作為字符的時(shí)候能夠高亮，這真的很方便。通過(guò)一些打包工具，也可以直接將.glsl文件直接引入js中去，但可能配置比較麻煩，目前這種方式已經(jīng)能很好滿足我得需求了。