标签：canvas gl Color webGL --- let Position 矩形 255

基本三角形构建矩形

们知道，一个矩形其实可以由两个共线的三角形组成，即 V0, V1, V2, V3，其中 V0 -> V1 -> V2 代表三角形A，V0 -> V2 -> V3代表三角形B。

默认情况下，WebGL 会认为顶点顺序为逆时针时代表正面，反之则是背面，区分正面、背面的目的在于，如果开启了背面剔除功能的话，背面是不会被绘制的。

着色器

顶点着色器

 <script type="shader-source" id="vertexShader">
        // 浮点数设置为中等精度
        precision mediump float;
        // 接收 JavaScript 传递过来的点的坐标（X,Y)
        attribute vec2 a_Position;
        // 接收canvas的尺寸。
        attribute vec2 a_Screen_Size;
        attribute vec4 a_Color;
        varying vec4 v_Color;

        void main(){
            // 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
            vec2 position = (a_Position/a_Screen_Size)*2.0 - 1.0;
            // canvas的 Y 轴坐标方向和设备坐标系的相反。
            position = position * vec2(1.0, -1.0);
            //  最终的顶点坐标。
            gl_Position = vec4(position, 0.0, 1.0);
            // 将顶点颜色传递给片元着色器
            v_Color = a_Color；
        }
    </script>

顶点着色器

 <script type="shader-source" id="fragmentShader">
        //浮点数设置为中等精度
        precision mediump float;
        //全局变量，用来接收 JavaScript传递过来的颜色。
	varying vec4 v_Color;
        void main(){
		// 将颜色处理成 GLSL 允许的范围[0， 1]。
		vec4 color = v_Color / vec4(255, 255, 255, 1);
		// 点的最终颜色。
		gl_FragColor = color;
	 }
  </script>

JavaScript 部分

首先准备组成矩形的三角形，每个三角形由三个顶点组成，两个矩形共需要六个顶点。

//获取canvas
    let canvas = getCanvas('#canvas');
    //设置canvas尺寸为满屏
    resizeCanvas(canvas);
    //获取绘图上下文
    let gl = getContext(canvas);
    //创建着色器程序
    let program = createSimpleProgramFromScript(gl, 'vertexShader', 'fragmentShader');

    //使用该着色器程序
    gl.useProgram(program);

    // 随机生成一个颜色。
    let color = randomColor();
    // 找到着色器中的全局变量 u_Color;
    let u_Color = gl.getUniformLocation(program, 'u_Color');
    // 将随机颜色传递给给全局变量
    gl.uniform4f(u_Color, color.r, color.g, color.b, color.a);
    // 获取 canvas 尺寸。
    let a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
    // 将 canvas 尺寸传递给顶点着色器。
    gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);

    // 定义组成矩形的两个三角形，共计六个顶点，每个顶点包含2个坐标分量和4个颜色分量。
    let positions = [
    	//V0
    	30, 30, 255, 0, 0, 1,
    	//V1
    	30, 300, 0, 255, 0, 1, 
    	//V2
    	300, 300, 0, 255, 0, 1, 
    	//V0
    	30, 30, 255, 255, 0, 1,
    	//V2 
    	300, 300, 255, 255, 0, 1, 
    	//V3
    	300, 30, 0, 0, 255, 1
    ];

    let a_Position = gl.getAttribLocation(program, 'a_Position');
	let a_Color = gl.getAttribLocation(program, 'a_Color');

    gl.enableVertexAttribArray(a_Position);
	gl.enableVertexAttribArray(a_Color);
	// 创建缓冲区
    let buffer = gl.createBuffer();
    // 绑定缓冲区为当前缓冲
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 设置 a_Position 属性从缓冲区读取数据方式
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
	// 设置 a_Color 属性从缓冲区读取数据方式
	gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
	// 向缓冲区传递数据
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    //设置清屏颜色为黑色。
    gl.clearColor(0, 0, 0, 1);

    
    /*渲染*/
    function render(gl) {
        gl.clear(gl.COLOR_BUFFER_BIT);
        if (positions.length > 0) {
            gl.drawArrays(gl.TRIANGLES, 0, positions.length / 6);
        }
    }
    render(gl);

标签：canvas,gl,Color,webGL,---,let,Position,矩形,255
来源： https://www.cnblogs.com/zaisanshuiyifang/p/15791282.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。