基于gl_FragCoord繪制漸變顏色三角形

index.html

<html>

<head>
  <meta lang="en">
  <meta charset="UTF-8">
  <title>colored triangle</title>
  <script src="../lib/cuon-utils.js"></script>
  <style>
      body{
          margin:0;
      }
      canvas{
          display:block;
          border:1px solid #999;
      }
      .btn-group {
          width: 500px;
          text-align: center;
          padding: 10px 0;
      }
  </style>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>

<script src="./index.js"></script>

index.js

/**
 * 在webgl中 如果頂點著色器與片元著色器中有類型和名稱都相同的varying變量劳秋，
 * 那么頂點著色器賦值給該變量的值就會被自動的傳入片元著色器
 */
// 頂點著色器程序
var VSHADER_SOURCE =`
    attribute vec4 a_Position;
    void main() {
        //設(shè)置坐標(biāo)
        gl_Position = a_Position; 
        gl_PointSize = 30.0; 
    } 
`;

// 片元著色器
var FSHADER_SOURCE =`
    precision mediump float;
    uniform float u_Width;
    uniform float u_Height;
    void main() {
        //設(shè)置顏色
        gl_FragColor = vec4(gl_FragCoord.x/u_Width, 0, gl_FragCoord.y/u_Height, 1.0);
    }
`;
// 獲取canvas元素
var canvas = document.getElementById('canvas');

// 獲取繪制二維上下文
var gl = canvas.getContext('webgl');

gl.clearColor(0, 0, 0, 1);

// 初始化shader
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

// 初始化頂點
var n = initVertexBuffer(gl);

function draw(gl, n) { 
    console.log(n);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n );
}

/**
 * 初始化頂點
 */
function initVertexBuffer(gl) {
    /* ==================== 創(chuàng)頂點坐標(biāo)建緩沖區(qū) ==================== */
    var vertices = new Float32Array([
        -0.5, 0,
        0, 0.5,
        0.5, 0,
    ]);
    var size = 2;
    var FSIZE = Float32Array.BYTES_PER_ELEMENT;

    /* 創(chuàng)建緩沖區(qū) */
    var vertexPositionBuffer = gl.createBuffer();
    // 將緩沖區(qū)綁定到目標(biāo)
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    // 向緩沖區(qū)寫入數(shù)據(jù)
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    /* 設(shè)置頂點 */
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    // 將緩沖區(qū)對象分配給a_Position
    gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0);
    // 激活attibue 是緩沖區(qū)對attribute變量分配生效
    gl.enableVertexAttribArray(a_Position);

    /* 設(shè)置 u_Width/u_Height 值 */
    var u_Width = gl.getUniformLocation(gl.program, 'u_Width');
    gl.uniform1f(u_Width, canvas.width);
    var u_Height = gl.getUniformLocation(gl.program, 'u_Height');
    gl.uniform1f(u_Height, canvas.height);

    return vertices.byteLength / size / FSIZE;
}

draw(gl, n);

以下函數(shù)詳見 http://www.reibang.com/p/c33a36c26c06

<script src="../lib/cuon-utils.js"></script>

colored-triangle.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者