webGl shader的学习记录(二) 点击鼠标在canvas中出现随机颜色的小点点图元

程序员文章站 2022-03-27 13:09:38
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="shader-source" id="vertexShader">
    //设置浮点数精度为中等精度
    precision mediump float;
    //接收点在 canvas 坐标系上的坐标 (x, y)
    attribute vec2 a_Position;
    //接收 canvas 的宽高尺寸
    attribute vec2 a_Screen_Size;
    void main(){
        //start 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
       position = position * vec2(1.0, -1.0);
       gl_Position = vec4(position, 0, 1);
       //end 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       //声明要绘制的点的大小。
       gl_PointSize = 10.0;
    }
</script>

<script type="shader-source" id="fragmentShader">

    //设置浮点数精度为中等精度
    precision mediump float;
    //接收 JavaScript 传过来的颜色值（RGBA）。
    uniform vec4 u_Color;
    void main(){
        //将普通的颜色表示转化为 WebGL 需要的表示方式，即将【0-255】转化到【0,1】之间。
       vec4 color = u_Color / vec4(255, 255, 255, 1);
       gl_FragColor = color;
    }
</script>


<!--<script type="shader-source" id="vertexShader">-->
    <!--void main(){-->
        <!--//声明顶点位置-->
        <!--gl_Position = vec4(0.0, 0.0, 0.0 ,1.0);-->
        <!--//声明要绘制的点的大小-->
        <!--gl_PointSize = 10.0;-->
    <!--}-->
<!--</script>-->


<!--<script type="shader-source" id="fragmentShader">-->
    <!--void main(){-->
        <!--//设置像素颜色为红点-->
        <!--gl_FragColor = vec4(1.0,0.0,0.0,1.0);-->
    <!--}-->
<!--</script>-->

<canvas id="canvas"></canvas>

<script>
    function randomColor() {
        return {
            r: Math.random() * 255,
            g: Math.random() * 255,
            b: Math.random() * 255,
            a: Math.random() * 1
        };
    }



    let canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let gl = canvas.getContext('webgl');
    //顶点着色器
    let vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
    let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader,vertexShaderSource);
    gl.compileShader(vertexShader);

    //片元着色器
    let fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader,fragmentShaderSource);
    gl.compileShader(fragmentShader);
    //着色器程序
    //创建着色器程序WebGLProgram
    let program = gl.createProgram();//WebGLProgram
    gl.attachShader(program,vertexShader);//将顶点定点着色器挂靠在program上
    gl.attachShader(program,fragmentShader);//将片元着色器挂靠在program上
    gl.linkProgram(program);
    gl.useProgram(program);//选择使用这个程序WebGLProgram

    //设置清空画布使用的颜色




    //找到顶点做着色器程序中的变量 a_Position
    //getAttribLocation(program: WebGLProgram, name: string): GLint;
    //getAttribLocation通过这个方法取到相关Attribute的相关参数
    let a_Position = gl.getAttribLocation(program,'a_Position');
    //找到顶点做着色器程序中的变量 a_Screen_Size
    //getAttribLocation通过这个方法取到相关Attribute的相关参数
    let a_Screen_Size = gl.getAttribLocation(program,'a_Screen_Size');
    console.log(a_Position,a_Screen_Size);
    //找到片元着色器的变量 u_colo;
    let u_Clolor = gl.getUniformLocation(program,'u_Color');
    //为顶点着色器中的 a_Screen_Size 传递 canvas 的宽高信息
    //通过这个指令传递相传递相关参数a_Screen_Size
    gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);
    this.clearcanvas();
    let points = [];
    canvas.addEventListener('click',e =>{
        let x = e.pageX;
        let y = e.pageY;
        //取到随机的颜色
        let color = randomColor();
        //放入数组之中
        points.push({x,y,color});

        this.clearcanvas();
        for (let i = 0;i<points.length;i++ ){
            let color = points[i].color;
            //为片元着色器中的 u_Color 传递随机颜色
            gl.uniform4f(u_Clolor,color.r,color.g,color.b,color.a);
            //为定点着色器传递传递坐标
            gl.vertexAttrib2f(a_Position,points[i].x,points[i].y);
            //描绘出来点
            gl.drawArrays(gl.POINTS,0,1);

        }

    })


    //的到相关参数使用get开头然后找到数据类型就能摘找到
    //通过上面修改相关参数  我们总结出来有个用法 修改相应的采纳数 就是用相应参数的类型 去修改



    //清除屏幕渲染背景
    function clearcanvas(){
        //设置清屏后的背景颜色
        gl.clearColor(0,0,0,1);
        //使用缓存中设设置好的颜色 就是上面这个颜色
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
</script>



</body>
</html>
webGl shader的学习记录(二) 点击鼠标在canvas中出现随机颜色的小点 点图元

webGl shader的学习记录(二) 点击鼠标在canvas中出现随机颜色的小点 点图元

webGl shader的学习记录(二) 点击鼠标在canvas中出现随机颜色的小点点图元

webGl shader的学习记录(二) 点击鼠标在canvas中出现随机颜色的小点点图元
