webgl入门系列（1）——画点

最新推荐文章于 2024-03-25 15:54:14 发布

niuge No.1

最新推荐文章于 2024-03-25 15:54:14 发布

阅读量434

点赞数

分类专栏： webgl

本文链接：https://blog.csdn.net/niuge8905/article/details/108948797

版权

webgl 专栏收录该内容

37 篇文章 14 订阅

订阅专栏

1、将画点写在顶点着色器里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点</title>
    <script src="base.js"></script>
</head>
<style>
    #container{
        width: 800px;
        height: 600px;
    }
</style>
<body>
    <canvas id="container"></canvas>
    <script>
        const canvas=document.getElementById('container')
        var VSHADER=`
        void main(){
            gl_Position=vec4(0.0,0.0,0.0,1.0);
            gl_PointSize=20.0;
        }
        `;
        var FSHADER=`
        precision mediump float;
        void main(){
            gl_FragColor=vec4(1.0,0.0,0.0,1.0);
        }
        `;
        let webgl=container.getContext('webgl2'); //获得webgl的上下文
        if(!webgl)
        {
            console.assert("该网页不支持webgl2");
        }
        if(!initShaders(webgl, VSHADER, FSHADER)){
            console.assert("初始化shader错误");
        }
        webgl.clearColor(0.0, 0.0, 0.0, 1.0); //设置背景颜色
        webgl.clear(webgl.COLOR_BUFFER_BIT); //清除canvas的颜色
        webgl.drawArrays(webgl.POINTS,0,1);
    </script>
</body>
</html>

2、将点的赋值移到javascript里

<body>
    <canvas id="container"></canvas>
    <script>
        const canvas=document.getElementById('container')
        var VSHADER=`
        attribute vec4 a_Position;
        attribute float a_PointSize;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=a_PointSize;
        }
        `;
        var FSHADER=`
        precision mediump float;
        uniform vec4 u_Color;
        void main(){
            gl_FragColor=u_Color;
        }
        `;
        let webgl=container.getContext('webgl2') //获得webgl的上下文
        if(!webgl)
        {
            console.assert("该网页不支持webgl2")
        }
        if(!initShaders(webgl, VSHADER, FSHADER)){
            console.assert("初始化shader错误")
        }
        webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
        webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色

        let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
        let a_PointSize=webgl.getAttribLocation(webgl.program, 'a_PointSize')
        let u_Color=webgl.getUniformLocation(webgl.program, 'u_Color')

        webgl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 1.0)
        webgl.vertexAttrib1f(a_PointSize,10.0)
        webgl.uniform4f(u_Color, 1.0, 0.0, 0.0, 1.0)

        webgl.drawArrays(webgl.POINTS,0,1)
    </script>
</body>

3、鼠标交互输入控制点

这里需要注意width和height需要在canvas元素中直接指定，在style里指定的不对，具体原因见：

https://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点</title>
    <script src="base.js"></script>
</head>
<body>
    <canvas id="container" width="800px" height="600px"></canvas>
    <script>
        const canvas=document.getElementById('container')
        var VSHADER=`
        attribute vec4 a_Position;
        attribute float a_PointSize;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=a_PointSize;
        }
        `;
        var FSHADER=`
        precision mediump float;
        uniform vec4 u_Color;
        void main(){
            gl_FragColor=u_Color;
        }
        `;
        let webgl=container.getContext('webgl') //获得webgl的上下文
        if(!webgl)
        {
            console.assert("该网页不支持webgl2")
        }
        if(!initShaders(webgl, VSHADER, FSHADER)){
            console.assert("初始化shader错误")
        }
        webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色


        let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
        let a_PointSize=webgl.getAttribLocation(webgl.program, 'a_PointSize')
        let u_Color=webgl.getUniformLocation(webgl.program, 'u_Color')
        var points = [];
        var colors = [];
        canvas.onclick=(evt)=>{
            let x=evt.clientX
            let y=evt.clientY
            let rect=evt.target.getBoundingClientRect()

            x=((x-rect.left)-canvas.clientWidth/2)/(canvas.clientWidth/2)
            y=(canvas.clientHeight/2-(y-rect.top))/(canvas.clientHeight/2)
            points.push([x, y]);

            webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色

            for (var i=points.length; i>0; i--) {
                var xy = points[i-1];
                var rgba = colors[i-1];
                webgl.vertexAttrib4f(a_Position,xy[0], xy[1], 0.0, 1.0)
                webgl.vertexAttrib1f(a_PointSize,10.0)
                webgl.uniform4f(u_Color, 1.0, 0.0, 0.0, 1.0)

                webgl.drawArrays(webgl.POINTS,0,1)
            }
        }
        webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
    </script>
</body>
</html>

4、一次性画多个点

<canvas id="container" width="800px" height="600px"></canvas>
    <script>
        const canvas=document.getElementById('container')
        var VSHADER=`
        attribute vec4 a_Position;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=10.0;
        }
        `;
        var FSHADER=`
        precision mediump float;
        void main(){
            gl_FragColor=vec4(1.0,0.0,0.0,1.0);
        }
        `;
        let webgl=container.getContext('webgl') //获得webgl的上下文
        if(!webgl)
        {
            console.assert("该网页不支持webgl2")
        }
        if(!initShaders(webgl, VSHADER, FSHADER)){
            console.assert("初始化shader错误")
        }
        webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色


        let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')

        let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
        var colors = []
        webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
        let vertexBuffer=webgl.createBuffer()  //创建缓冲区对象
        webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer)  //将缓冲区对象绑定到目标
        webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据

        webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
        webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象

        webgl.drawArrays(webgl.POINTS,0,3)
    </script>

5、将点改为圆点

这里主要修改片元着色器就好

    <canvas id="container" width="800px" height="600px"></canvas>
    <script>
        const canvas=document.getElementById('container')
        var VSHADER=`
        attribute vec4 a_Position;
        varying vec4 v_color;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=10.0;
        }
        `;
        var FSHADER=`
        precision mediump float;
        void main(){
            float dist=distance(gl_PointCoord,vec2(0.5,0.5));
            if(dist<0.5){
                gl_FragColor=vec4(1.0,0.0,0.0,1.0);
            }
            else{
                discard;
            }
        }
        `;
        let webgl=container.getContext('webgl') //获得webgl的上下文
        if(!webgl)
        {
            console.assert("该网页不支持webgl2")
        }
        if(!initShaders(webgl, VSHADER, FSHADER)){
            console.assert("初始化shader错误")
        }
        webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色


        let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')

        let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
        var colors = []
        webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
        let vertexBuffer=webgl.createBuffer()  //创建缓冲区对象
        webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer)  //将缓冲区对象绑定到目标
        webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据

        webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
        webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象

        webgl.drawArrays(webgl.POINTS,0,3)
    </script>

niuge No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webgl入门系列（1）——画点

1、将画点写在顶点着色器里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点</title> <script src="base.js">&lt
复制链接

扫一扫