在vue中通过WEBGL渲染一个2d三角形

最新推荐文章于 2025-04-17 16:03:07 发布

jolin233

最新推荐文章于 2025-04-17 16:03:07 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： webgl vue 文章标签： vue webgl

本文链接：https://blog.csdn.net/jolin233/article/details/88708257

本文介绍如何在Vue项目中利用WebGL进行图形渲染，详细阐述了从获取WebGL绘图上下文，到初始化着色器，设置点的坐标，设定背景色，清空缓冲区，最后绘制2D三角形的整个流程。同时，提到了借助gl-matrix.js库进行矩阵计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制流程
获取Webgl绘图上下文->初始化着色器-》设置点的坐标信息-》设置背景色->清空->绘制

<template>
 <div class="page">
    <canvas id="glcanvas" width="640" height="480"></canvas>
 </div>
</template>

<script>
export default {
 data() {
    return {
        trees:"ssss",
        horizAspect:480.0/640.0,
        squareVerticesBuffer:null,
    }
 },
  methods:{
    initShaderProgram(gl, vsSource, fsSource){
        const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
        // 创建着色器程序

        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // 创建失败， alert
        if (!gl.getProgramParameter(shaderProgram, gl.LINK