three.js引入glsl文件并高亮顯示代碼的方法

這篇文章主要講解了“three.js引入glsl文件并高亮顯示代碼的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“three.js引入glsl文件并高亮顯示代碼的方法”吧！

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

在three.js中自己寫(xiě)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文件分開(kāi)

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

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

但問(wèn)題在于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文件分開(kāi)了，但是這樣shader語(yǔ)言以字符串導(dǎo)入到j(luò)s中，其本身沒(méi)有問(wèn)題，因?yàn)樵趈s中，shader就是以一段字符串傳的形式給GPU。但一個(gè)問(wèn)題在于，我們?cè)诰庉嬈髦锌吹降膕hader語(yǔ)言沒(méi)有高亮，因?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)能很好滿(mǎn)足我得需求了。

感謝各位的閱讀，以上就是“three.js引入glsl文件并高亮顯示代碼的方法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)three.js引入glsl文件并高亮顯示代碼的方法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！