vite2 ts 搭建webgl开发环境

原文链接: vite2 ts 搭建webgl开发环境

上一篇: vite2 vue3-ts 添加router, vuex和alias

下一篇: regl 函数式webgl开发体验

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL

需要引入一个库

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>

用gl画一个彩色的方块

安装插件

yarn add rollup-plugin-glsl

import glsl from "rollup-plugin-glsl";


  glsl({
    // By default, everything gets included
    include: "**/*.glsl",
    // Undefined by default
    exclude: ["**/index.html"],
    // Source maps are on by default
    // sourceMap: false,
  }),


ts.config
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.glsl"
  ]

添加声明模块

declare module "*.glsl";

两个插件, 主要是语法高亮, 其实感觉上是可以直接用.c作为后缀的... 这样也就有了格式化能力