three.js引入glsl檔案並高亮顯示程式碼的完整步驟

2022-03-19 13:00:33

同一個js檔案中引入glsl

在three.js中自己寫shader語言的時候，我們需要把glsl與JavaScript兩種語言結合起來，即在ShaderMaterial中傳入物件，從而引入shader。實際上，物件中的vertexShader和fragmentShader兩屬性的值是String，所以最簡單的辦法就是將整個shader程式碼作為字串：

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

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

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

glsl檔案與js檔案分開

這樣在three.js中引入shader語言當然可以執行，但問題在於這樣shader語言和JavaScript原因在同一個資料夾中，不好管理，我們需要將js檔案和glsl檔案單獨成兩個檔案，最好形成如下的檔案結構：

（1）shader資料夾
vertexShader.glsl
fragmentShader.glsl
（2）app.js
（3）index.html

但問題在於js並不能importglsl檔案，所以我能只好將.glsl改成.js，將shader語言作為js的字串進行import，上述的檔案結構就變成了：

（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';

確實這樣就將js檔案和glsl檔案分開了，但是這樣shader語言以字串匯入到js中，其本身沒有問題，因為在js中，shader就是以一段字串傳的形式給GPU。但一個問題在於，我們在編輯器中看到的shader語言沒有高亮，因為它們只是一段字串，全部一樣顏色，這是非常不方便的。

高亮顯示glsl程式碼

這裡需要下載外掛Comment target templates.

使用步驟非常簡單，只需加上/*glsl*/,告訴外掛字串裡的東西是glsl語言：

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

最終在vscode中的顯示效果：

當然在three.js中引入shader語言的方式有很多，也可以放到html中，放在<script>標籤裡面。外掛Comment target templates讓shader語言作為字元的時候能夠高亮，這真的很方便。通過一些打包工具，也可以直接將.glsl檔案直接引入js中去，但可能設定比較麻煩，目前這種方式已經能很好滿足我得需求了。

總結

到此這篇關於three.js引入glsl檔案並高亮顯示程式碼的文章就介紹到這了,更多相關three.js引入glsl並高亮程式碼內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

three.js引入glsl檔案並高亮顯示程式碼的完整步驟

目錄

同一個js檔案中引入glsl

glsl檔案與js檔案分開

高亮顯示glsl程式碼

總結

熱門文章