1. 程式人生 > >JavaScript-WebGL2學習筆記二-從外部load shader

JavaScript-WebGL2學習筆記二-從外部load shader

在前一篇的基礎上做了以下修改

[1]shader改為從url中獲取

[2]去掉了四個頂點顏色的輸入,改為根據頂點同左下角的距離在fragment shader中計算著色.

現在有四個原始檔組成這個demo

html檔案

<html>
<head>
    <!--
        Date: 2018-3-19
        Author: kagula
        Prologue:
        WebGL2的例子
        Prologue:

        Description:
        顯示一個左下角紅色,右上角白色的rectangle.

        Original:
        [1]https://my.oschina.net/thesadabc/blog/1592866

        測試環境
        [1]Chrome 65.0.3325.162
        [2]nginx  1.12.2
    -->
    <title>第二個Webgl2程式</title>

    <meta charset="utf-8">
    <!-- gl-matrix version 2.4.0 from http://glmatrix.net/ -->
    <script type="text/javascript" src="/gl-matrix-min.js"></script>

    <script type="text/javascript" src="/kagula/webgl2_helper.js"></script>
</head>

<body>
    <canvas id="glCanvas" width="320" height="200"></canvas>
</body>

</html>

<script>
    main();

    //弄4個頂點, 4個顔色, 用來演示render流程!
    function initBuffers(gl) {
        // Create a buffer for the square's positions.
        const positionBuffer = gl.createBuffer();

        // Select the positionBuffer as the one to apply buffer
        // operations to from here out.
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        // Now create an array of positions for the square.
        //WebGL最後會把計算好的影象資訊投影到左下角{-1,-1},右上角{1,1}的區域中。
        const positions = [
           1.0, 1.0,
          -1.0, 1.0,
           1.0, -1.0,
          -1.0, -1.0,
        ];

        // Now pass the list of positions into WebGL to build the
        // shape. We do this by creating a Float32Array from the
        // JavaScript array, then use it to fill the current buffer.
        gl.bufferData(gl.ARRAY_BUFFER,
                      new Float32Array(positions),
                      gl.STATIC_DRAW);

        return {
            position: positionBuffer
        };
    }
    
    async function main() {
        //選擇器的使用
        //http://www.runoob.com/jsref/met-document-queryselector.html
        const canvas = document.querySelector("#glCanvas");

        // Initialize the GL context
        //為了獲取WebGL2上下文,getContext方法傳入的引數是"webgl2",而不是"webgl".
        const gl = canvas.getContext("webgl2");

        // Only continue if WebGL is available and working
        if (!gl) {
            alert("Unable to initialize WebGL. Your browser or machine may not support it.");
            return;
        }

        //OpenGL ES 3.0 不支援多維陣列
        //對傳入的陣列大小有限制
        console.log("gl.MAX_VERTEX_UNIFORM_VECTORS=" + gl.MAX_VERTEX_UNIFORM_VECTORS + ", gl.MAX_FRAGMENT_UNIFORM_VECTORS=" + gl.MAX_FRAGMENT_UNIFORM_VECTORS);

        //裝配shader到shaderProgram中去
        const vsSource = await loadResource("../shader/simple.vs");
        const fsSource = await loadResource("../shader/simple.fs");
        const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

        //為了讓外部的資料能統一傳到shanderProgram中去,新建programInfo物件。
        //vertexPosition => aVertexPosition位置
        //projectionMatrix => uProjectionMatrix位置
        //modelViewMatrix => uModelViewMatrix位置
        //...
        const programInfo = {
            program: shaderProgram,
            attribLocations: {
                vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
                out_vpos: gl.getAttribLocation(shaderProgram, 'out_vpos'),
            },
            uniformLocations: {
                projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
                modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
            },
        };

        //initBuffers(gl)返回要render的vertex.
        drawScene(gl, programInfo, initBuffers(gl));
    }//main
</script>

webgl2_helper.js檔案

async function loadResource(remoteFile) {
    try {
        let response = await fetch(remoteFile);
        return response.text();
        console.log(data);
    } catch(e) {
        console.log("Oops, error", e);
    }
}

// Initialize a shader program, so WebGL knows how to draw our data
function initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

    // Create the shader program
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    // If creating the shader program failed, alert
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
        return null;
    }

    return shaderProgram;
}

// creates a shader of the given type, uploads the source and
// compiles it.
function loadShader(gl, type, source) {
    const shader = gl.createShader(type);

    // Send the source to the shader object
    gl.shaderSource(shader, source);

    // Compile the shader program
    gl.compileShader(shader);

    // See if it compiled successfully
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

function drawScene(gl, programInfo, buffers) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
    gl.clearDepth(1.0);                 // Clear everything
    gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

    // Clear the canvas before we start drawing on it.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Create a perspective matrix, a special matrix that is
    // used to simulate the distortion of perspective in a camera.
    // Our field of view is 45 degrees, with a width/height
    // ratio that matches the display size of the canvas
    // and we only want to see objects between 0.1 units
    // and 100 units away from the camera.
    const fieldOfView = 45 * Math.PI / 180;   // in radians
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100.0;
    const projectionMatrix = mat4.create();

    // note: glmatrix.js always has the first argument
    // as the destination to receive the result.
    mat4.perspective(projectionMatrix,
                     fieldOfView,
                     aspect,
                     zNear,
                     zFar);

    // Set the drawing position to the "identity" point, which is
    // the center of the scene.
    const modelViewMatrix = mat4.create();

    // Now move the drawing position a bit to where we want to
    // start drawing the square.
    mat4.translate(modelViewMatrix,     // destination matrix
                   modelViewMatrix,     // matrix to translate
                   [-0.0, 0.0, -3.0]);  // amount to translate,  [-0.0, 0.0, -6.0] 放到遠一點

    //這裡準備vertex shader需要的資料
    //整個pipeline可以看成下面的流程
    //我們使用WebGL準備資料 => Vertex Shader => WebGL => Fragment Shader => WebGL => Canvas
    // Tell WebGL how to pull out the positions from the position
    // buffer into the vertexPosition attribute.
    {
        // gl.ARRAY_BUFFER => 指向 => buffers.position 
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

        //指定源資料格式.
        //https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexPosition,
            2,// pull out 2 values per iteration //Must be 1, 2, 3, or 4.  比如說頂點{x,y}要選2,{x,y,z}要選3,顏色{r,g,b,a}要選4
            gl.FLOAT,// the data in the buffer is 32bit floats
            false,// don't normalize
            0,//stride, how many bytes to get from one set of values to the next
            0);//how many bytes inside the buffer to start from

        //源資料填充到gl
        //tell WebGL that this attribute should be filled with data from our array buffer.
        //gl.ARRAY_BUFFER => 資料傳到 => programInfo.attribLocations.vertexPosition
        gl.enableVertexAttribArray(
            programInfo.attribLocations.vertexPosition);
    }

    // Tell WebGL to use our program when drawing
    gl.useProgram(programInfo.program);

    // Set the shader uniforms
    //projectionMatrix => programInfo.uniformLocations.projectionMatrix
    gl.uniformMatrix4fv(
        programInfo.uniformLocations.projectionMatrix,
        false,//A GLboolean specifying whether to transpose the matrix. Must be false.
        projectionMatrix);

    //modelViewMatrix => programInfo.uniformLocations.modelViewMatrix
    gl.uniformMatrix4fv(
        programInfo.uniformLocations.modelViewMatrix,
        false,
        modelViewMatrix);

    //資料準備好後可以draw了.
    {
        const offset = 0;
        const vertexCount = 4;

        //開始處理已經在gl中的頂點資料
        //gl.TRIANGLE_STRIP模式復用前面兩個頂點,  所以這裡告訴gl,  render兩個三角形.
        gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
    }
}

vertex shader檔案simple.vs

#version 300 es
//指定float int的精度
precision highp float;
precision highp int;

//從裝置外部傳入的資料.
in vec4 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

//這裡存放要傳給Fragment shader的資料.
out vec2 frag_vpos;

void main() {
    float curX = (aVertexPosition.x + 1.) / 2.;
    float curY = (aVertexPosition.y + 1.) / 2.;
    frag_vpos = vec2(curX, curY);

	//output vertex position to pipeline
	//通過透視投影的方式,轉3D屬性的頂點對映成2D屬性的頂點。
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}

fragment shader檔案simple.fs

#version 300 es
precision highp float;   

//from vertex shader
in vec2 frag_vpos;

//output to pipeline
out vec4 myOutputColor;

void main() {
	float pos_x = frag_vpos.x;
	float pos_y = frag_vpos.y;

	float distance = sqrt(pos_x * pos_x + pos_y * pos_y);
		
	//第四個引數為Alpha通道,1=>紅色 ,0=>白色, 所以左下角最紅
	myOutputColor = vec4(1, 0, 0, 1. - distance);
}