7.绘制矩形（TRIANGLE_STRIP）

最新推荐文章于 2024-06-23 20:48:22 发布

就是那个帕吉

最新推荐文章于 2024-06-23 20:48:22 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGL 文章标签：前端 typescript webgl

本文链接：https://blog.csdn.net/weixin_41012454/article/details/133639634

WebGL 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用Vue和WebGL2在JavaScript中通过TRIANGLE_STRIP绘制一个矩形，包括顶点着色器和片段着色器的编写，以及在Vue组件中实现渲染过程。

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

愿你出走半生,归来仍是少年

通过TRIANGLE_STRIP以及4个点绘制出一个矩形。

1.知识点

1.1.TRIANGLE_STRIP

绘制出一系列带状的三角形。第二个三角形使用上一个三角形的中间的那条表，并保证第二个三角是逆时针绘制。

2.代码

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import Gl2Utility from "../../Gl/Gl2Utility";
    import VertexBufferUtility from "../../Gl/VertexBufferUtility";

    const a_PositionName = "a_Position";

    onMounted(() => {



        const gl2 = Gl2Utility.GetGl2("canvas");

        if (gl2 == null) {
            console.error("初始化失败！");

            return;
        }



        //顶点着色器源码
        const vertexShaderSource = `

        attribute vec4 ${a_PositionName};

            void main(){

                 //顶点位置，位于坐标原点
                  gl_Position =a_Position;
            }

        `;

        const fragShaderSource = `
            void main(){
                //定义片元颜色
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `;


        const program = Gl2Utility.InitShaders(gl2, vertexShaderSource, fragShaderSource);

        if (program == null) {
            return;
        }
        //获取参数位置
        const a_PositionLocation = gl2.getAttribLocation(program, a_PositionName);

        if (a_PositionLocation < 0) {
            console.error("获取参数失败！");

            return;
        }


        const count = VertexBufferUtility.InitFloatXY(gl2, program, a_PositionName,
            [-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5,]);

        //设置清除时的背景色
        gl2.clearColor(0., 0., 0., 1.);

        //清除
        gl2.clear(gl2.COLOR_BUFFER_BIT);

        //绘制点
        gl2.drawArrays(gl2.TRIANGLE_STRIP, 0, count);


    });




</script>

<template>

    <div class="demo_main">

        <canvas id="canvas"></canvas>
    </div>
</template>

<style scoped>

    #canvas {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: blue;
    }

    .demo_main {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>