webGL学习第一天(下)

2019-08-07  本文已影响0人  Simple_Learn

webGL,主要通过 vertex shader (顶点着色器),fragment shader (片元着色器)来进行渲染。

渲染流程

  1. 通过 createProgram() 创建了 program 对象
  2. 通过 createShader() 创建 sharder 对象,
    并通过 shaderSource() 绑定原始的 sharder 程序,这个后续有介绍,
    绑定完成之后执行 complieShader() 完成 sharder 对象的创建
  3. 通过 attachShader 将 shader 绑定到 project 上
  4. 链接、使用、绘制
渲染流程

完整示例代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第二个WebGL尝试</title>
        <script src="webgl-utils.js"></script>
    </head>
    <body>
       <div>
            <!--WebGL 是JavaScript API, 内容都写在HTML5 的<canvas> 标签底下-->
            <canvas id="canvas" width="300" height="300"></canvas>    
       </div>

        <script type="text/javascript">
            
            function initShaders(gl){
                var glProgram = gl.createProgram();
                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

                //顶点着色器程序
                var VSHADER_SOURCE =
                    "void main() {" +
                        //设置坐标
                    "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
                        //设置尺寸
                    "gl_PointSize = 100.0; " +
                    "} ";
                var FSHADER_SOURCE =
                    'void main() {\n' +
                    '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 
                    '}\n';
                
                gl.shaderSource(vertexShader,VSHADER_SOURCE);
                gl.shaderSource(fragmentShader,FSHADER_SOURCE);
                
                gl.compileShader(vertexShader);
                gl.compileShader(fragmentShader);
                
                gl.attachShader(glProgram,vertexShader);
                gl.attachShader(glProgram,fragmentShader);
                
                gl.linkProgram(glProgram);
                
                gl.useProgram(glProgram);
                
                gl.drawArrays(gl.POINTS,0,1);
            }
            
            var canvas = document.getElementById("canvas");
            var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
            if(!gl){
                console.log("该浏览器不支持WEBGL");
            }else{
                initShaders(gl);
            }
        
        </script>

    </body>
</html>

效果如下:

显示一个小红块

下面我们来具体分析一下代码:
代码着色器部分:

                var VSHADER_SOURCE =
                    "void main() {" +
                        //设置坐标
                    "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
                        //设置尺寸
                    "gl_PointSize = 100.0; " +
                    "} ";
                var FSHADER_SOURCE =
                    'void main() {\n' +
                    '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 
                    '}\n';

vertex shader 顶点着色器

顾名思义,顶点着色器主要负责定义图形的顶点坐标,大小等位置相关的信息。
在main函数中,我们将位置信息赋给gl_Position,将顶点大小赋值给gl_PointSize.

fragment shader 片元着色器

片元着色器主要是定义颜色等属性。
这里我们简单的通过 gl_FragColor 告诉着色器点的颜色为 vec4(1.0, 0.0, 0.0, 1.0)

然后我们进行渲染

第一步,创建和初始化一个WebGLProgram对象。

                var glProgram = gl.createProgram();

第二步,创建着色器对象,并绑定到项目对象上。

2.1 创建Shader对象

                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

2.2 设置 shader 着色器的GLSL代码

                gl.shaderSource(vertexShader,VSHADER_SOURCE);
                gl.shaderSource(fragmentShader,FSHADER_SOURCE);

2.3 编译 shader ,使其成为为二进制数据,然后就可以被WebGLProgram对象所使用.

                gl.compileShader(vertexShader);
                gl.compileShader(fragmentShader);

2.4 添加一个片段或者顶点着色器到WebGLProgram对象上

                gl.attachShader(glProgram,vertexShader);
                gl.attachShader(glProgram,fragmentShader);

2.5 链接一个创建好的WebGLProgram对象

                gl.linkProgram(glProgram);

2.6 把定义好的WebGLProgram对象添加到当前渲染状态中。

                gl.useProgram(glProgram);

第三步,绘制
这样我们就完成了一个简单的webGL的渲染流程。

上一篇 下一篇

猜你喜欢

热点阅读