webgl 绘制三角形和线的绘制

作者: Viewwei | 来源:发表于2021-05-08 22:46 被阅读0次

TWaver3D直线、曲线、曲面的绘制
WebGL 绘制Line的bug（一）
《WebGL编程指南》学习笔记6——绘制矩形
webgl 绘制三角形和线的绘制
WebGL绘制个最简单的三角形
学习WebGL文章目录
canvas绘制仪表盘
WebGL编程指南笔记二第三章第四章绘制和变换
WebGL初学：构建一个多彩三角形与矩形
WebGL-绘制三角形

gl.drawArrays(mode,first,count) 方法可以绘制一下图形：

POINTS 可视的点
LINES 单独线段
LINE_STRIP 线条
LINE_LOOP 闭合线条
TRIANGLES 单独三角形
TRIANGLE_STRIP 三角带
TRIANGLE_FAN 三角扇形

线条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        #canvas {
            /* width: 100px; */
            /* height: 100px; */
            /* background: red; */
        }
    </style>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec4 a_Position;
        void main(){
            gl_Position = a_Position;
            //  必须使用浮点数
            gl_PointSize = 50.0;
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec4 u_FragColor;
        void main(){
            gl_FragColor = u_FragColor;
        }
    </script>
    <script type="module">
    // 绘制多个点
    import { initShaders } from "./jsm/util.js";
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 获取着色器文本
    const vsSource = document.querySelector("#vertexShader").innerText;
    const fsSource = document.querySelector("#fragmentShader").innerText;
    console.log(vsSource,fsSource)
    const gl = canvas.getContext('webgl')
    initShaders(gl, vsSource, fsSource)
    //声明颜色 rgba
    // gl.clearColor(0, 0, 0, 1);
    //刷底色
    // gl.clear(gl.COLOR_BUFFER_BIT);
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
    const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
    gl.uniform4f(u_FragColor, 1, 0, 0, 1)
    //  获取传递数组
    // const arr = new 
    gl.uniform4fv(u_FragColor, new Float32Array([1, 0, 0, 1]))
    gl.vertexAttrib3f(a_Position, 0, 0, 0)
    const vertextPoints = new Float32Array([0, 0.1, 0.1, 0.2, 0.5, 0.6, 0.3, 0.2])
    //设置缓存区
    const vertextBuff = gl.createBuffer()
    //  绑定缓冲对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuff)
    // 向绑定对象写入对象
    gl.bufferData(gl.ARRAY_BUFFER, vertextPoints,gl.STATIC_DRAW)
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    gl.enableVertexAttribArray(a_Position)
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    //  代表线段
    gl.drawArrays(gl.LINES, 0, 4)
    //  代表线条
    // gl.drawArrays(gl.LINE_STRIP, 0, 4)
    //  闭合线段
    // gl.drawArrays(gl.LINE_LOOP, 0, 4)
    </script>
</html>

LINES 单独线段实例

gl.drawArrays(gl.LINES, 0, 4)

image.png

LINE_STRIP 线条

gl.drawArrays(gl.LINE_STRIP, 0, 4)

image.png

LINE_LOOP 闭合线段

gl.drawArrays(gl.LINE_LOOP, 0, 4)

image.png

三角形的绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        #canvas {
            /* width: 100px; */
            /* height: 100px; */
            /* background: red; */
        }
    </style>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec4 a_Position;
        void main(){
            gl_Position = a_Position;
            //  必须使用浮点数
            gl_PointSize = 50.0;
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec4 u_FragColor;
        void main(){
            gl_FragColor = u_FragColor;
        }
    </script>
    <script type="module">
    // 绘制多个点
    import { initShaders } from "./jsm/util.js";
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 获取着色器文本
    const vsSource = document.querySelector("#vertexShader").innerText;
    const fsSource = document.querySelector("#fragmentShader").innerText;
    console.log(vsSource,fsSource)
    const gl = canvas.getContext('webgl')
    initShaders(gl, vsSource, fsSource)
    //声明颜色 rgba
    // gl.clearColor(0, 0, 0, 1);
    //刷底色
    // gl.clear(gl.COLOR_BUFFER_BIT);
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
    const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
    gl.uniform4f(u_FragColor, 1, 0, 0, 1)
    //  获取传递数组
    // const arr = new 
    gl.uniform4fv(u_FragColor, new Float32Array([1, 0, 0, 1]))
    gl.vertexAttrib3f(a_Position, 0, 0, 0)
    const vertextPoints = new Float32Array(
    [
        0, 0.1,
        0.1, 0,
        -0.1, -0.1,  
        0.3, 0.4,
        0.4, 0,
        0.5, -0.1,  
          ])
    //设置缓存区
    const vertextBuff = gl.createBuffer()
    //  绑定缓冲对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuff)
    // 向绑定对象写入对象
    gl.bufferData(gl.ARRAY_BUFFER, vertextPoints,gl.STATIC_DRAW)
    // 修改顶点着色器数据
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    // 开启顶点绘制多点的能力
    gl.enableVertexAttribArray(a_Position)
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    //  3 代表绘制三个点
    gl.drawArrays(gl.TRIANGLES, 0, 6)
    </script>
</html>