<script id="shader-vs">
attribute vec3 v3Position;
void main(void){
gl_Position = vec4(v3Position, 1.0);
}
</script>
当我们在HTML页面中编写GLSL代码并且格式化文档的时候,由于webstorm无法正确识别GLSL语法,导致格式化GLSL代码会出现超过预期的换行,如何让webstorm正确识别GLSL语法?
第一步:安装GLSL语法插件。在webstorm中File -> Settings -> Plugins -> Marketplace 搜索安装GLSL Support。安装后重启webstorm。
第二步:在script标签中加上正确的type标签。
// 顶点着色器
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
void main(void){
gl_Position = vec4(v3Position, 1.0);
}
</script>
// 片段着色器
<script id="shader-fs" type="x-shader/x-fragment">
void main(void){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
到此,webstorm就可以正确识别GLSL语法。你再格式化文档的时候,webstorm也能正确识别不会导致代码错乱。