Vue与WebGL结合

本文将WebGL与当前前端比较火的Vue框架进行初步结合，以备后续项目开发需要。部分代码源自https://blog.csdn.net/GISuuser/article/details/82224057以及《WebGL编程指南》。

大家可以自己百度搜索vue的安装配置。这里仅介绍本项目的开发过程。

1、创建vue工程

在cmd窗口中输入vue init webpack vueproject，创建名为vueproject的工程。

2、创建webgl工具类

在src文件下新建lib文件夹，然后在lib文件夹里新建tools.js。在tools.js中按照ES6的写法封装webgl的基本配置。代码如下：

class Tools {
  static initShaders(gl, vshader, fshader) {
    var program = Tools.createProgram(gl, vshader, fshader);
    if (!program) {
      console.log('创建program失败');
      return false;
    }
    gl.useProgram(program);
    gl.program = program;
​
    return true;
  }
  static createProgram(gl, vshader, fshader) {
    // 创造着色器对象
    let vertexShader = Tools.loadShader(gl, gl.VERTEX_SHADER, vshader);
    let fragmentShader = Tools.loadShader(gl, gl.FRAGMENT_SHADER, fshader);
    if (!vertexShader || !fragmentShader) {
      return null;
    }
​
    // 创造 program 对象
    let program = gl.createProgram();
    if (!program) {
      return null;
    }
​
    // 绑定着色器与program
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
​
    //连接program
    gl.linkProgram(program);
​
    // 检查连接结果
    let linked = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!linked) {
      let error = gl.getProgramInfoLog(program);
      console.log('连接 program失败: ' + error);
      gl.deleteProgram(program);
      gl.deleteShader(fragmentShader);
      gl.deleteShader(vertexShader);
      return null;
    }
    return program;
  }
​
  /**
   * 创建着色器
   * @param gl
   * @param type
   * @param source
   * @returns {*}
   */
  static loadShader(gl, type, source) {
    // 创建着色器
    let shader = gl.createShader(type);
    if (shader == null) {
      console.log('创建着色器失败');
      return null;
    }
​
    // Set the shader program
    gl.shaderSource(shader, source);
​
    // 编译着色器
    gl.compileShader(shader);
​
    // 检查编译结果
    let compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
      let error = gl.getShaderInfoLog(shader);
      console.error('编译着色器失败: ' + error);
      gl.deleteShader(shader);
      return null;
    }
​
    return shader;
  }
​
}
​
export default Tools

3、在components文件夹里新建test.vue文件，代码如下：

<template>
  <div>
    <canvas id="glcanvas" width="640" height="480"></canvas>
  </div>
</template>
​
<script>
import Tool from "../lib/tools";
export default {
  data() {
    return {};
  },
  mounted() {
    //顶点着色器
    let VSHADER_SOURCE =
      "void main() {\n" +
      "  gl_Position = vec4(0.5, 0.5, 0.0, 1.0);\n" + // 设置点的位置
      "  gl_PointSize = 10.0;\n" + // 设置点的大小
      "}\n";
​
    // 片元着色器
    let FSHADER_SOURCE =
      "void main() {\n" +
      "  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n" + // 设置点的颜色
      "}\n";
​
    //获取上下文对象
    const canvas = document.querySelector("#glcanvas");
    const gl = canvas.getContext("webgl");
    //检测WebGL支持
    if (!gl) {
      console.error("浏览器不支持WebGL");
      return;
    }
    if (!Tool.initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
      console.error("初始化着色器失败");
      return;
    }
    //设置背景色
    gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
  }
};
</script>
​
<style scoped>
</style>

1-5行在template中创建canvas

8行导入tools.js的工具类，并命名为Tool

13-44行考虑到代码需要获取canvas对象，因此在mounted中创建关于webgl渲染。

（vue知识：created:html加载完成之前，执行。执行顺序：父组件-子组件

mounted:html加载完成后执行。执行顺序：子组件-父组件

methods：事件方法执行

watch：watch是去监听一个值的变化，然后执行相对应的函数。

computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值）

 

4、添加路由

打开router文件夹下的index.js，将test组件添加进去

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/Test'
​
Vue.use(Router)
​
export default new Router({
  routes: [
    {
      path: '/',
      component: Test
    }
  ]
})

5、运行结果：

在cmd中定位到当前工程的路径下，输入npm run dev，编译成功后，在浏览器中输入http://localhost:8080，即可看到效果：

这里出现了vue的logo，可以在App.vue中将其去掉。

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

然后再编译运行

6、更多内容请扫码关注我的微信公众号，或者在微信里搜索公众号webgis学习，我会不定期更新自己的webgis方面的学习心得。