WebGL編程指南.ZC代碼

時間 2019-11-11

標籤 webgl 編程指南代碼简体版

原文原文鏈接

一、javascript

二、css

　　2.一、0201_HelloCanvas.htmlhtml

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <!-- <script type="text/javascript" src="???.js"></script> -->
    <script type="text/javascript" >
    <!--
/*
        var create3DContext = function(canvas, opt_attribs)
        {
            var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
            var context = null;
            for (var ii = 0; ii < names.length; ++ii)
            {
                try {
                context = canvas.getContext(names[ii], opt_attribs);
                } catch(e) {}
                if (context) {
                break;
                }
            }
            return context;
        }
*/

        window.onload = function()
        {
            var canvas = document.getElementById('webgl');
            //var context = canvas.getContext("experimental-webgl");

            // Get the rendering context for WebGL
            var gl = canvas.getContext("experimental-webgl");
            if (! gl)
            {
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

            // Set clear color
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);
        };

    -->
    </script>

    <!-- <link rel="stylesheet" href="???.css"> -->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

</body>

</html>

　　2.二、0204_HelloPoint1.htmljava

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <!-- <script type="text/javascript" src="???.js"></script> -->
    <script type="text/javascript" >
    <!--

        // Vertex shader program
        var VSHADER_SOURCE = 
            'void main() {\n' +
            '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
            '  gl_PointSize = 10.0;\n' +                    // Set the point size
            '}\n';

        // Fragment shader program
        var FSHADER_SOURCE =
            'void main() {\n' +
            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
            '}\n';

        window.onload = function()
        {
            var canvas = document.getElementById('webgl');
            //var context = canvas.getContext("experimental-webgl");

            // Get the rendering context for WebGL
            var gl = canvas.getContext("experimental-webgl");
            if (! gl)
            {
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

                    /*
                        // Initialize shaders
                        if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
                        {
                            console.log('Failed to intialize shaders.');
                            return;
                        }
                    */
                    {
                        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                        if (vertexShader == null)
                        {
                            console.log('unable to create shader');
                            return;
                        }

                        // Set the shader program
                        gl.shaderSource(vertexShader, VSHADER_SOURCE);

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

                        // Check the result of compilation
                        var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
                        if (! compiled_vertex)
                        {
                            var error = gl.getShaderInfoLog(vertexShader);
                            console.log('Failed to compile shader: ' + error);
                            gl.deleteShader(vertexShader);
                            return;
                        }

                    // ***
                            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                            if (fragmentShader == null)
                            {
                                console.log('unable to create shader');
                                return;
                            }
                            gl.shaderSource(fragmentShader, FSHADER_SOURCE);
                            gl.compileShader(fragmentShader);
                            var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
                            if (! compiled_fragment)
                            {
                                var error = gl.getShaderInfoLog(fragmentShader);
                                console.log('Failed to compile shader: ' + fragmentShader);
                                gl.deleteShader(fragmentShader);
                                return;
                            }

                    // ***
                        if ( (! vertexShader) || (! fragmentShader) )
                            return;

                        // Create a program object
                        var program = gl.createProgram();
                        if (! program)
                            return;

                        // Attach the shader objects
                        gl.attachShader(program, vertexShader);
                        gl.attachShader(program, fragmentShader);

                        // Link the program object
                        gl.linkProgram(program);

                        // Check the result of linking
                        var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
                        if (! linked)
                        {
                            var error = gl.getProgramInfoLog(program);
                            console.log('Failed to link program: ' + error);
                            gl.deleteProgram(program);
                            gl.deleteShader(fragmentShader);
                            gl.deleteShader(vertexShader);
                            return;
                        }

                    // ***

                        if (! program)
                        {
                            console.log('Failed to create program');
                            return;
                        }

                        gl.useProgram(program);
                        gl.program = program;
                    }

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw a point
            gl.drawArrays(gl.POINTS, 0, 1);
        };

    -->
    </script>

    <!-- <link rel="stylesheet" href="???.css"> -->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

</body>

</html>

　　2.三、02.6_HelloPoint2.htmlweb

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <!-- <script type="text/javascript" src="???.js"></script> -->
    <script type="text/javascript" >
    <!--

        // Vertex shader program
        var VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n' +// ZC: 必須是 全局變量
        'void main() {\n' +
        '    gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
        '    gl_PointSize = 10.0;\n' +                    // Set the point size
        '}\n';

        // Fragment shader program
        var FSHADER_SOURCE =
            'void main() {\n' +
            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
            '}\n';

        window.onload = function()
        {
            var canvas = document.getElementById('webgl');
            //var context = canvas.getContext("experimental-webgl");

            // Get the rendering context for WebGL
            var gl = canvas.getContext("experimental-webgl");
            if (! gl)
            {
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

                            /*
                                // Initialize shaders
                                if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
                                {
                                    console.log('Failed to intialize shaders.');
                                    return;
                                }
                            */
                            {
                                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                                if (vertexShader == null)
                                {
                                    console.log('unable to create shader');
                                    return;
                                }

                                // Set the shader program
                                gl.shaderSource(vertexShader, VSHADER_SOURCE);

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

                                // Check the result of compilation
                                var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
                                if (! compiled_vertex)
                                {
                                    var error = gl.getShaderInfoLog(vertexShader);
                                    console.log('Failed to compile shader: ' + error);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***
                                    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                                    if (fragmentShader == null)
                                    {
                                        console.log('unable to create shader');
                                        return;
                                    }
                                    gl.shaderSource(fragmentShader, FSHADER_SOURCE);
                                    gl.compileShader(fragmentShader);
                                    var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
                                    if (! compiled_fragment)
                                    {
                                        var error = gl.getShaderInfoLog(fragmentShader);
                                        console.log('Failed to compile shader: ' + fragmentShader);
                                        gl.deleteShader(fragmentShader);
                                        return;
                                    }

                            // ***
                                if ( (! vertexShader) || (! fragmentShader) )
                                    return;

                                // Create a program object
                                var program = gl.createProgram();
                                if (! program)
                                    return;

                                // Attach the shader objects
                                gl.attachShader(program, vertexShader);
                                gl.attachShader(program, fragmentShader);

                                // Link the program object
                                gl.linkProgram(program);

                                // Check the result of linking
                                var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
                                if (! linked)
                                {
                                    var error = gl.getProgramInfoLog(program);
                                    console.log('Failed to link program: ' + error);
                                    gl.deleteProgram(program);
                                    gl.deleteShader(fragmentShader);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***

                                if (! program)
                                {
                                    console.log('Failed to create program');
                                    return;
                                }

                                gl.useProgram(program);
                                gl.program = program;
                            }

            // ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓

                // Get the storage location of a_Position
                var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
                if (a_Position < 0)
                {
                    console.log('Failed to get the storage location of a_Position');
                    return;
                }

                // Pass vertex position to attribute variable
                gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

            // ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw a point
            gl.drawArrays(gl.POINTS, 0, 1);
        };

    -->
    </script>

    <!-- <link rel="stylesheet" href="???.css"> -->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

</body>

</html>

　　2.四、02.7_ClickedPoints.htmlcanvas

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <!-- <script type="text/javascript" src="???.js"></script> -->
    <script type="text/javascript" >
    <!--

        // Vertex shader program
        var VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n' +// ZC: 必須是 全局變量
        'void main() {\n' +
        '    gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
        '    gl_PointSize = 10.0;\n' +                    // Set the point size
        '}\n';

        // Fragment shader program
        var FSHADER_SOURCE =
            'void main() {\n' +
            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
            '}\n';

        window.onload = function()
        {
            var canvas = document.getElementById('webgl');
            //var context = canvas.getContext("experimental-webgl");

            // Get the rendering context for WebGL
            var gl = canvas.getContext("experimental-webgl");
            if (! gl)
            {
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

                            /*
                                // Initialize shaders
                                if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
                                {
                                    console.log('Failed to intialize shaders.');
                                    return;
                                }
                            */
                            {
                                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                                if (vertexShader == null)
                                {
                                    console.log('unable to create shader');
                                    return;
                                }

                                // Set the shader program
                                gl.shaderSource(vertexShader, VSHADER_SOURCE);

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

                                // Check the result of compilation
                                var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
                                if (! compiled_vertex)
                                {
                                    var error = gl.getShaderInfoLog(vertexShader);
                                    console.log('Failed to compile shader: ' + error);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***
                                    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                                    if (fragmentShader == null)
                                    {
                                        console.log('unable to create shader');
                                        return;
                                    }
                                    gl.shaderSource(fragmentShader, FSHADER_SOURCE);
                                    gl.compileShader(fragmentShader);
                                    var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
                                    if (! compiled_fragment)
                                    {
                                        var error = gl.getShaderInfoLog(fragmentShader);
                                        console.log('Failed to compile shader: ' + fragmentShader);
                                        gl.deleteShader(fragmentShader);
                                        return;
                                    }

                            // ***
                                if ( (! vertexShader) || (! fragmentShader) )
                                    return;

                                // Create a program object
                                var program = gl.createProgram();
                                if (! program)
                                    return;

                                // Attach the shader objects
                                gl.attachShader(program, vertexShader);
                                gl.attachShader(program, fragmentShader);

                                // Link the program object
                                gl.linkProgram(program);

                                // Check the result of linking
                                var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
                                if (! linked)
                                {
                                    var error = gl.getProgramInfoLog(program);
                                    console.log('Failed to link program: ' + error);
                                    gl.deleteProgram(program);
                                    gl.deleteShader(fragmentShader);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***

                                if (! program)
                                {
                                    console.log('Failed to create program');
                                    return;
                                }

                                gl.useProgram(program);
                                gl.program = program;
                            }

            // ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓

                // Get the storage location of a_Position
                var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
                if (a_Position < 0)
                {
                    console.log('Failed to get the storage location of a_Position');
                    return;
                }

            //    // Pass vertex position to attribute variable
            //    gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

                // Register function (event handler) to be called on a mouse press
                canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); };

            // ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

        //    // Draw a point
        //    gl.drawArrays(gl.POINTS, 0, 1);
        };


        var g_points = []; // The array for the position of a mouse press
        function click(ev, gl, canvas, a_Position)
        {
            var x = ev.clientX; // x coordinate of a mouse pointer
            var y = ev.clientY; // y coordinate of a mouse pointer
            var rect = ev.target.getBoundingClientRect() ;

            x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
            y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
            // Store the coordinates to g_points array
            g_points.push(x); g_points.push(y);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            // ZC: 繪製所有的點
            var len = g_points.length;
            for(var i = 0; i < len; i += 2)
            {
                // Pass the position of a point to a_Position variable
                gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);

                // Draw
                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }

    -->
    </script>

    <!-- <link rel="stylesheet" href="???.css"> -->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

</body>

</html>

　　2.五、02.8_ColoredPoints.htmlwebgl

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <!-- <script type="text/javascript" src="???.js"></script> -->
    <script type="text/javascript" >
    <!--

        // Vertex shader program
        var VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n' +// ZC: 必須是 全局變量
        'void main() {\n' +
        '    gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
        '    gl_PointSize = 10.0;\n' +                    // Set the point size
        '}\n';

        // Fragment shader program
        var FSHADER_SOURCE =
            'precision mediump float;\n' +// ZC: 精度限定詞
            'uniform vec4 u_FragColor;\n' +  // uniform変數
            'void main() {\n' +
            '  gl_FragColor = u_FragColor;\n' + // Set the point color
            '}\n';

        window.onload = function()
        {
            var canvas = document.getElementById('webgl');
            //var context = canvas.getContext("experimental-webgl");

            // Get the rendering context for WebGL
            var gl = canvas.getContext("experimental-webgl");
            if (! gl)
            {
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

                            /*
                                // Initialize shaders
                                if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
                                {
                                    console.log('Failed to intialize shaders.');
                                    return;
                                }
                            */
                            {
                                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                                if (vertexShader == null)
                                {
                                    console.log('unable to create shader');
                                    return;
                                }

                                // Set the shader program
                                gl.shaderSource(vertexShader, VSHADER_SOURCE);

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

                                // Check the result of compilation
                                var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
                                if (! compiled_vertex)
                                {
                                    var error = gl.getShaderInfoLog(vertexShader);
                                    console.log('Failed to compile shader: ' + error);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***
                                    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                                    if (fragmentShader == null)
                                    {
                                        console.log('unable to create shader');
                                        return;
                                    }
                                    gl.shaderSource(fragmentShader, FSHADER_SOURCE);
                                    gl.compileShader(fragmentShader);
                                    var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
                                    if (! compiled_fragment)
                                    {
                                        var error = gl.getShaderInfoLog(fragmentShader);
                                        console.log('Failed to compile shader: ' + fragmentShader);
                                        gl.deleteShader(fragmentShader);
                                        return;
                                    }

                            // ***
                                if ( (! vertexShader) || (! fragmentShader) )
                                    return;

                                // Create a program object
                                var program = gl.createProgram();
                                if (! program)
                                    return;

                                // Attach the shader objects
                                gl.attachShader(program, vertexShader);
                                gl.attachShader(program, fragmentShader);

                                // Link the program object
                                gl.linkProgram(program);

                                // Check the result of linking
                                var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
                                if (! linked)
                                {
                                    var error = gl.getProgramInfoLog(program);
                                    console.log('Failed to link program: ' + error);
                                    gl.deleteProgram(program);
                                    gl.deleteShader(fragmentShader);
                                    gl.deleteShader(vertexShader);
                                    return;
                                }

                            // ***

                                if (! program)
                                {
                                    console.log('Failed to create program');
                                    return;
                                }

                                gl.useProgram(program);
                                gl.program = program;
                            }

            // ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓   ↓ ↓ ↓

                // Get the storage location of a_Position
                var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
                if (a_Position < 0)
                {
                    console.log('Failed to get the storage location of a_Position');
                    return;
                }

            //    // Pass vertex position to attribute variable
            //    gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

                // Get the storage location of u_FragColor
                var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
                if (!u_FragColor)
                {
                    console.log('Failed to get the storage location of u_FragColor');
                    return;
                }

                // Register function (event handler) to be called on a mouse press
                canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position, u_FragColor) };

            // ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑   ↑ ↑ ↑

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

        //    // Draw a point
        //    gl.drawArrays(gl.POINTS, 0, 1);
        };


        var g_points = [];  // The array for the position of a mouse press
        var g_colors = [];  // The array to store the color of a point
        function click(ev, gl, canvas, a_Position, u_FragColor)
        {
            var x = ev.clientX; // x coordinate of a mouse pointer
            var y = ev.clientY; // y coordinate of a mouse pointer
            var rect = ev.target.getBoundingClientRect();

            x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
            y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);

            // Store the coordinates to g_points array
            g_points.push([x, y]);
            // Store the coordinates to g_points array
            if (x >= 0.0 && y >= 0.0)    // First quadrant
                g_colors.push([1.0, 0.0, 0.0, 1.0]);  // Red
            else if (x < 0.0 && y < 0.0)// Third quadrant
                g_colors.push([0.0, 1.0, 0.0, 1.0]);  // Green
            else if (x > 0.0 && y < 0.0)// ZC: 我加的，第4象限
                g_colors.push([0.0, 0.0, 1.0, 1.0]);  // ZC: 藍色
            else                        // Others
                g_colors.push([1.0, 1.0, 1.0, 1.0]);  // White

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            var len = g_points.length;
            for(var i = 0; i < len; i++)
            {
                var xy = g_points[i];
                var rgba = g_colors[i];

                // Pass the position of a point to a_Position variable
                gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
                // Pass the color of a point to u_FragColor variable
                gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
                // Draw
                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }


    -->
    </script>

    <!-- <link rel="stylesheet" href="???.css"> -->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

</body>

</html>