运维开发网

Three.js介绍了glsl文件,并强调了代码的完整步骤

运维开发网 https://www.qedev.com 2022-06-09 21:16 出处:网络
这篇文章主要给大家介绍了关于three.js引入glsl文件并高亮显示代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要给大家介绍了关于three.js引入glsl文件并高亮显示代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


同一个js文件中引入glsl

在用three.js编写着色器语言时,我们需要将glsl和JavaScript结合起来,即在ShaderMaterial中导入对象,从而引入着色器。实际上,对象中的vertexshader和fragmentShader的值是字符串,最简单的方法是将整个着色器代码作为字符串使用:

//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中引入着色器语言当然可以运行,但问题是着色器语言和JavaScript在同一个文件夹中,很难管理。我们需要把js文件和glsl文件分开成两个文件,最好形成如下文件结构:

(1)着色器文件夹
vertex shader . glsl
fragmentshader . glsl
(2)app . js
(3)index.html

但问题是js无法导入glsl文件,我只能改。glsl到。js并将着色器语言作为js字符串导入。上面的文件结构变成了:

(1)着色器文件夹
vertex shader . js
fragment shader . js
(2)app . js
(3)index.html

//vertexShader.jsconst vertexShader = `void main() { gl_Position = vec4(position, 1.0); }`;export default vertexShader;//app.jsimport vertexShader from './shader/vertexShader.js';import fragmentShader from './shader/fragmentShader.js';

js文件从glsl文件中分离出来是没错,但是shader语言作为字符串导入js是没有问题的,因为在js中,shader是以字符串的形式给GPU的。但有一个问题是,我们在编辑器中看到的着色器语言并没有高亮显示,因为它们只是一个字符串,都是同一个颜色,很不方便。



高亮显示glsl代码

这里你需要下载插件评论目标模板。


使用步骤很简单,只需添加/*glsl*/告诉插件字符串里的是glsl语:

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

vscode中的最终显示效果:


当然,在three.js中引入shader语言的方法有很多,也可以放在html中,放在lt中;scriptgt。在标签里面。插件注释目标模板使着色器语言能够作为字符突出显示,这非常方便。通过一些打包工具,也可以直接导入。glsl文件转换成js,但是配置起来可能比较麻烦。目前这个方法已经可以满足我的需求了。


总结

这就是这篇关于three.js介绍glsl文件并突出代码的文章。关于three.js介绍glsl和突出代码内容的更多信息

0

精彩评论

暂无评论...
验证码 换一张
取 消