Loading

搭建良好编写体验的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()]
  ,
})

编写示例

目录:
image.png
顶点着色器代码:image.png
js中引入:
image.png

posted @ 2023-03-11 15:46  Nicander  阅读(751)  评论(0编辑  收藏  举报