搭建良好编写体验的webgl编程环境 vscode+vit

因为webgl代码是以字符串的形式嵌入在javascript代码中，这对于我们编写webgl代码的体验不友好，本文介绍如何搭建友好webgl编程环境：

需要安装的vscode插件#

• WebGL GLSL Editor：支持webgl代码高亮，语法提示等。
• Shader languages support for VS Code
  

vite环境搭建#

vite项目初始化这里就不说了，在vite项目建立完成后，安装[vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl)插件,这个插件的作用是可以让将编写在glsl文件中的着色器代码，import进js代码中，而不需要用字符串的形式编写着色器代码。
安装完成后在vite.config.js中引入：

import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl';

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    glsl()]
  ,
})

编写示例#

目录：

顶点着色器代码：
js中引入：