webGl shader的学习记录(四):如何与人互动绘制多个三角形。

 正在这一章节中我们将会学习到如何使用鼠标创造多个三角形,从而实现互动

 老规矩首先我们需要先处理一下顶点着色器与片元着色器

    let vertexShaderSource = `
       //设置浮点数精度为中等精度
        precision mediump float;
        // 接收顶点坐标 (x, y)
        attribute vec2 a_Position;
        // 接收 canvas 的尺寸(width, height)
        attribute vec2 a_Screen_Size;
        void main(){
            vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
            position = position * vec2(1.0,-1.0);
            gl_Position = vec4(position, 0, 1);
        }
    `;
    //片元着色器
    let fragmentShaderSource =`
        precision mediump float;
        uniform vec4 u_Color;
        void main(){
            vec4 color = u_Color/vec4(255,255,255,1);
            gl_FragColor = color;
        }
    `

如果你并不太理解上面的内容是什么意思的话,可以去看这一章,你会大概的明白是什么意思

下面就是老生常谈的代码了,创建出来顶点着色器然后是片元着色器

我有任务了 先去工作了,做完了再回来写

 




    
    Title








 

你可能感兴趣的:(webGl,webgl,动态,绘制,三角形)