WebGL简单绘制图形的两种方法

最新推荐文章于 2024-05-10 12:42:21 发布

桃子阿哥

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量906

点赞数 1

分类专栏： Html5 文章标签： html5 前端 css3 es6

本文链接：https://blog.csdn.net/m0_48446542/article/details/107834058

版权

Html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一种方法跟canvas相似 , 不常用.

step1: 添加一个画布元素
step2: 获取到画布元素的基于webgl的上下文环境对象
step3: 使用对象的api

<body>
    <canvas id="pic" width="200" height="200" style="border: dashed 1px solid"></canvas>
    <script type="text/javascript">
    
        // 获取画布元素
        let pic = document.getElementById("pic");
        // 获取到元素的上下文环境对象
        let gl = pic.getContext('webgl');

        // 设置绘制图形的颜色  设置好后自动保存到缓存中
        gl.clearColor(1.0,0.0,0.0,1.0);  
    
        // 调用缓存中的值填充图形
        gl.clear(gl.COLOR_BUFFER_BIT)
    
    </script>
</body>

第二种方法: 使用着色器绘制

着色器介绍:
着色器是使用 OpenGL ES Shading Language (GLSL) 语言编写的程序, 负责记录像素点的位置和颜色, 并由顶点着色器和片段着色器组成, 通过GLSL编写这些着色器. 并将代码文本传递给WebGL编译. 编写时两个着色器是分开编写, 使用时是集合使用的, 集合统称为着色器程序

顶点着色器: 负责记录整个绘制图形顶点的坐标信息
片段着色器: 负责确定像素的颜色值

<body>
    <canvas id="pic" width="200" height="200" style="border: dashed 1px solid"></canvas>
    <script type="text/javascript">
    
        // 获取画布元素
        let pic = document.getElementById("pic");
        // 获取到元素的上下文环境对象
        let gl = pic.getContext('webgl');

        // 顶点着色器变量
        let VSHADER_SOURCE = 

            'void main() {' +
            // 顶点位置矢量值, vec4方法, 定义点的坐标并转换成变量保存
        
            'gl_Position = vec4(0.0,0.0,0.0,1.0);' +
            // 设置缩放距离的直径
            'gl_PointSize = 10.0;' + 

            '}';

        // 片段着色器变量
        let FSHADER_SOURCE = 

        'void main() {' +
            // 设置图形像素的颜色并保存
            'gl_FragColor = vec4(0.0,1.0,0.0,1.0);' +

            '}';
    </script>
</body>

桃子阿哥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebGL简单绘制图形的两种方法

第一种方法跟canvas相似 , 不常用.step1: 添加一个画布元素step2: 获取到画布元素的基于webgl的上下文环境对象step3: 使用对象的api<body> <canvas id="pic" width="200" height="200" style="border: dashed 1px solid"></canvas> <script type="text/javascript"> //
复制链接

扫一扫