vue-glsl v1.1.27

vue-glsl

vue-glsl 是一个基于vue3的片段着色器组件,使用的是webGL 1.0(移动端webGL 2.0不支持),并支持多webGLProgram项目。

组件支持shadertoyCode;

Screenshots

Install and Usage

# install dependices
 `npm install`

# examples
`npm run serve`

# build component
`npm run build-lib`

Quickstart

First, install vue-glsl using either npm.

npm i vue-glsl --save

Instanciate and tell Vue about the plugin

import {createApp} from 'vue'
import glsl from 'vue-glsl'
import App from './App.vue'
createApp(App).use(glsl).mount('#app');

Then use the components !

<template>
  <div id="app">
    <gl-canvas @update="glslUpdate">
      <gl-program name="main" :code="shaderCode">
        <gl-float name="u_light" :value="light" />
      </gl-program>
    </gl-canvas>
  </div>
</template>

<script lang="ts">
const shader=`
void main() {
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    gl_FragColor = vec4(col*u_light,1.0);
}`;
export default {
  data(){
    return{
      light:0,
      shaderCode:shader,
    }
  },
  methods:{
    glslUpdate(tickData: {
      iResolution: number[],
      iTime: number,
      iTimeDelta: number,
      iFrame: number,
      iMouse: number[],
      iDate: number[],
    }){
      //console.log(tickData);
      this.light = (Math.sin(tickData.iTime)+1)/2;
    }
  }
};
</script>
<style>
#app{
  position: absolute;
  top: 0;left: 0;
  padding: 0;margin: 0;
  width: 100%;height: 100%;
  background: #000;
  overflow: hidden;
}
</style>

API

包含了canvas创建，以及webGL环境配置,当gl-canvas被销毁时，requestAnimationFrame也将被销毁。

监听方法

update: 在每一次绘制时会触发该方法供vue做js操作,返回数据为当前帧的一些内置变量。

用法：

<gl-canvas :paused="false" @update="canvasUpdate">
  <!-- ... -->
</gl-canvas>
<script lang="ts">
  export default{
    // ...
    methods:{
      canvasUpdate(tickData:{
        iResolution :number[];  // viewport resolution (in pixels)
        iTime       :number;    // shader playback time (in seconds)
        iTimeDelta  :number;    // render time (in seconds)
        iFrame      :number;    // shader playback frame
        iMouse      :number[];  // mouse pixel coords. xy: current (if MLB down), zw: click
        iDate       :number[];  // (year, month, day, time in seconds)
      }){
        // ...
      }
    }
  }
</script>

webGLProgram的创建操作,必须是 gl-canvas 的子组件。

用法：

<gl-canvas>
  <gl-program name="buffer0" :code="bufferCode0"></gl-program>
  <gl-program name="main" :code="mainCode"></gl-program>
</gl-canvas>

WebGLUniform组件

WebGLUniform组件,当有int类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法：

<gl-canvas>
  <gl-program name="main" :code="mainCode">
    <gl-int name="u_int0" :value="u_int0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_int0:0,
        mainCode:`
void main(){
gl_FragColor = vec4(vec3(u_int0),1);
}
        `,
      }
    }
  }
</script>

WebGLUniform组件,当有float类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法：

<gl-canvas>
  <gl-program name="main" :code="mainCode">
    <gl-float name="u_float0" :value="u_float0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_float0:.5,
        mainCode:`
void main(){
gl_FragColor = vec4(vec3(u_float0),1);
}
        `,
      }
    }
  }
</script>

WebGLUniform组件,当有vec2类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec2数据；

WebGLUniform组件,当有vec3类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec3数据；

WebGLUniform组件,当有vec4类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec4数据；

WebGLUniform组件,当有mat2类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat2数据；

WebGLUniform组件,当有mat3类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat3数据；

WebGLUniform组件,当有mat4类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat4数据；

WebGLUniform组件,当用到纹理时，用此组件,必须是 gl-program 的子组件。

value 取值；

<string>imageURL:本地图片链接地址。

<HTMLImageElement>imageObj|<HTMLVideoElement>videoObj|<HTMLCanvasElement>canvasObj:可以传入Image\|Video\|Canvas对象（video对象没测，但是理论上可以的），比如展示跨域image时，自行传入image对象，效果同imageURL;

<string>webGLProgramName:当项目为多WebGLProgram时，value值可设置为gl-program的name值,可以把该frameBuffer引入纹理（除mainwebGLProgram外，其他webGLProgram均可当作纹理对象，原因是mainwebGLProgram要作为主frameBuffer渲染出来）;

<object>textureCubeData:用于添加立方体贴图，并包含以下数据： | Props | Type | describe | | :-------- | :-----: | :----------- | | front | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 | | back | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 | | left | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 | | right | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 | | top | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 | | bottom | imageURL\|imageObj\|videoObj\|canvasObj | 本地图片链接地址或者Image\|Video\|CanvasHTML对象，最好为2^n的正方形尺寸 |

用法：

<gl-canvas>
  <gl-program name="buffer0" :code="bufferCode0">
  </gl-program>
  <gl-program name="main" :code="mainCode">
    <gl-image name="u_image0" :value="u_image0">
    <gl-image name="u_image1" value="buffer0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_image0:require('../assets/image0.png'),
        //bufferCode0:...
        mainCode:`
void main(){
vec2 uv = gl_FragCoord.xy/iResolution.xy;
gl_FragColor = texture2D(u_image0,uv)+texture2D(u_image1,uv);
}
        `,
      }
    }
  }
</script>

用法：

在gl-image示例中已经用到了iResolution;