three.js引入glsl文件并高亮显示代码的完整步骤

目录
  • 同一个js文件中引入glsl
  • glsl文件与js文件分开
  • 高亮显示glsl代码
  • 总结

同一个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并高亮代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • three.js引入glsl文件并高亮显示代码的完整步骤

    目录 同一个js文件中引入glsl glsl文件与js文件分开 高亮显示glsl代码 总结 同一个js文件中引入glsl 在three.js中自己写shader语言的时候,我们需要把glsl与JavaScript两种语言结合起来,即在ShaderMaterial中传入对象,从而引入shader.实际上,对象中的vertexShader和fragmentShader两属性的值是String,所以最简单的办法就是将整个shader代码作为字符串: //vertexShader字符串 const ve

  • Minio设置文件链接永久有效的完整步骤

    目录 前言 1.下载MinIO Client 2.运行MinIO Client 3.添加一个云存储服务 4.验证 5.policy命令 - 管理存储桶策略 总结 前言 minio分享文件的链接,最多支持分享七天 通过 MinIO客户端 管理存储桶策略的方式实现文件链接永久有效 1.下载MinIO Client 采用 Docker 方式 安装 拉取Docker稳定版镜像 docker pull minio/mc 2.运行MinIO Client docker run -it --entrypoin

  • node.js读写json文件的方法

    本文实例为大家分享了node.js读写json文件的具体代码,供大家参考,具体内容如下 一.引入依赖包 const fs = require('fs') const path = require('path') const configFile = path.resolve(__dirname, './config.json') 二.读取文件 /** * 读取文件 * */ router.get('/get_config', async ctx => { try { const data = f

  • vue引入css文件导致全局污染的问题

    目录 引入css文件导致全局污染 vue避免全局样式污染的正确做法 解决方案 引入css文件导致全局污染 1.写在单组件的style里面css样式,如果标签内不加scoped可能会影响其他组件的样式 <style scoped></style> 2.通过import引入的外部css文件,这种引入方式是全局的,也会影响其他组件的页面样式 所以可以通过一下方法引入,则不会影响其他组件的页面样式 <style src="文件路径"></style&g

  • Vue项目中引入外部文件的方法(css、js、less)

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • Node.js查找当前目录下文件夹实例代码

    整理文档,搜刮出Node.js查找当前目录下文件夹实例代码,稍微整理精简一下做下分享. var http = require("http"); var fs = require("fs"); var server = http.createServer(function (req,res) { //不处理收藏夹小图标 if(req.url == "/favicon.ico"){ return; } //files是文件名的数组 表示text这个文

  • js装载xml文件然后发向服务器的实现代码

    前台:  复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>js装载

  • IE下JS读取xml文件示例代码

    使用JS读取xml文件,这里暂只考虑IE浏览器 step1 创建DOM对象 复制代码 代码如下: function createDom() { var xmlDoc = null; try { //IE if (typeof arguments.callee.activeXString != 'string') { var versions = [ "MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.3.0", "M

  • js自动下载文件到本地的实现代码

    复制代码 代码如下: <html> <head> <title>js自动下载文件到本地</title> <script language="javascript" type="text/javascript"> function InitAjax() { var ajax; if(window.ActiveXObject){ var versions = ['Microsoft.XMLHTTP', 'MSX

随机推荐