同一個js文件中引入glsl

在three.js中自己寫shader語言的時候，我們需要把glsl與JavaScript兩種語言結(jié)合起來，即在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文件單獨成兩個文件，最好形成如下的文件結(jié)構(gòu)：

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

但問題在于js并不能importglsl文件，所以我能只好將.glsl改成.js，將shader語言作為js的字符串進行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';

確實這樣就將js文件和glsl文件分開了，但是這樣shader語言以字符串導入到j(luò)s中，其本身沒有問題，因為在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中去，但可能配置比較麻煩，目前這種方式已經(jīng)能很好滿足我得需求了。

總結(jié)

到此這篇關(guān)于three.js引入glsl文件并高亮顯示代碼的文章就介紹到這了,更多相關(guān)three.js引入glsl并高亮代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！