解決redis快取穿透問題

阿新 • • 發佈：2021-01-30

<!--
 * @Author: 蘋果園dog
 * @Date: 2020-11-20 15:42:15
 * @LastEditTime: 2020-11-20 17:34:46
 * @LastEditors: Please set LastEditors
 * @Description: 
    webgl提供了一種很方便的機制，即緩衝區物件（buffer object），它可以一次性地向著色器傳入多個頂點的資料。
    緩衝區物件是是webgl中的一塊記憶體區域，我們可以一次性向緩衝區物件填充大量的頂點資料，然後將這些資料儲存在其中，共著色器使用。
    我們在initVertexBuffers函式中利用緩衝區物件向頂點著色器傳輸了多個頂點的資料，所以還需要第三個引數告訴gl.drawArray()函式
    需要繪製多少個頂點。webgl系統並不知道緩衝區中有多少個頂點資料，所以應該顯式告知。
    使用緩衝區物件向頂點著色器傳輸多個頂點資料的五個步驟
    1、建立緩衝區物件（gl.createBuffer()）
    2、繫結緩衝區物件(gl.bindBuffer())
    3、將資料寫入緩衝區物件(gl.bufferData())
    4、將緩衝區物件分配給一個attribute變數（gl.vertexAttribPointer（））
    5、開啟attribute變數（gl.enableVetexAttribArray()）
 * @FilePath: \web\webgl\ch03\multiPoints.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="main()">
    <canvas id="webgl" width="800" height="800"></canvas>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script>
        //頂點著色器
        var VSHADER_SOURCE=`
        attribute vec4 a_Position;
        void main(){
            gl_Position =a_Position;
        }
        `;
        //片元著色器
        var FSHADER_SOURCE=`
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
        `;

        function main() {
            //獲取<canvas>元素
                var canvas = document.getElementById('webgl');
            //獲取WebGL上下文
            var gl = getWebGLContext(canvas);
            if (!gl) {
                console.log('獲取WebGL繪圖上下文失敗!');
                return;
            }
            //初始化著色器
            if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                console.log('初始化著色器失敗！');
                return;
            }
            //設定頂點位置
            var n=initVertexBuffers(gl);            
            //設定canvas背景色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            //清除canvas
            gl.clear(gl.COLOR_BUFFER_BIT);
            //繪製一個三角形
            gl.drawArrays(gl.TRIANGLES, 0, n);
        }

        function initVertexBuffers(gl){
            var vertices=new Float32Array([-0.5,-0.5,0.5,-0.5,-0.5,0.5, 0.6,-0.5,0.8,-0.5,0.7,0.7]);
            var n=6;//點的個數
            //建立緩衝區物件
            var vertexBuffer=gl.createBuffer();
            if(!vertexBuffer){
                console.log('failed to create the buffer object!');
                return -1;
            }
            //將緩衝區物件繫結到目標
            gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
            //向緩衝區物件寫入資料
            gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
            var a_Position=gl.getAttribLocation(gl.program,'a_Position');
            if (a_Position < 0) {
                console.log('獲取a_Position變數的儲存位置失敗！');
                return -1;
            }
            //將緩衝區物件分配給a_Position變數
            //gl.vertexAttribPointer(location,size,type,normalized,stride,offset)
            gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
            gl.enableVertexAttribArray(a_Position);
            return n;
        }
    </script>
</body>
</html>

複製程式碼