Shulou(Shulou.com)06/01 Report--

This article mainly explains the "three.js introduces glsl files and highlights the code of the method", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "three.js introduces glsl files and highlight the code of the method" it!

Introducing glsl into the same js file

When we write the shader language in three.js, we need to combine glsl with JavaScript, that is, passing objects into ShaderMaterial to introduce shader. In fact, the values of the vertexShader and fragmentShader attributes in the object are String, so the easiest way is to use the entire shader code as a string:

/ / vertexShader string const vertexShader = `void main () {gl_Position = vec4 (position, 1.0);} `; / / fragmentShdaer string const fragmentShader = `void main () {gl_Fragment = vec4 / / the vertexShader,fragmentShader attribute const material = new THREE.ShaderMaterial passed in as a value ({vertexShader, / / key-value pair with the same name, but omitting the value fragmentShder,}) the glsl file is separated from the js file

Of course, it can be run by introducing the shader language into three.js, but the problem is that the shader language and JavaScript are in the same folder and are difficult to manage. We need to separate the js file and the glsl file into two files, preferably with the following file structure:

(1) shader folder

VertexShader.glsl

FragmentShader.glsl

(2) app.js

(3) index.html

But the problem is that js can't importglsl files, so I can only change .glsl to .js, import the shader language as a string of js, and the above file structure becomes:

(1) shader folder

VertexShader.js

FragmentShader.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'

It is true that this separates the js file from the glsl file, but there is no problem with importing the shader language into js as a string, because in js, shader is passed to GPU as a string. But one problem is that the shader languages we see in the editor are not highlighted because they are just a string, all of the same color, which is very inconvenient.

Highlight glsl Cod

Here you need to download the plug-in Comment target templates.

The steps are very simple, just add / * glsl*/, to tell the plug-in that what is in the string is glsl:

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

The final display in vscode:

Of course, there are many ways to introduce the shader language into three.js, but you can also put it in html and in the tag. The plug-in Comment target templates allows the shader language to highlight as characters, which is really convenient. Through some packaging tools, you can also directly introduce the .glsl file into js, but the configuration may be more troublesome, the current way has been very good to meet my needs.

Thank you for your reading, the above is the "three.js introduces the glsl file and highlight the code of the method" of the content, after the study of this article, I believe you on the introduction of three.js glsl file and highlight the code of the method has a deeper understanding of this problem, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.