提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

WebGL的shader

WebGL Shader
2023-09-14 08:58:55 时间

WebGL的shader（着色器）有2种：vertexShader（定点着色器）和 fragmentShader（片段着色器）

顶点着色器：定义点的位置、大小
片元着色器：定义画出来的物体的材质（颜色、反光度等...）

着色器定义有自己的一套语言：GLSL(Graphics Library Shading Language)

推荐阅读：https://blog.csdn.net/qq_37338983/article/details/78556063
http://www.alloyteam.com/2017/03/teach-you-to-use-webgl-to-quickly-create-a-small-world/

例如用WebGL画一个点：

<head>
    <!-- 顶点着色器 定义代码 -->
    <script type='x-shader/x-vertex' id='shader-vs'>
        void main(){
            gl_Position=vec4(100,0.0,0.0,1000);
            gl_PointSize=10.0;
        }
    </script>
    <!-- 片元着色器 定义代码 -->
    <script type='x-shader/x-fragment' id='shader-fs'>
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
    </script>
</head>

<body>
    <canvas id='webgl' width='400' height='400'></canvas>
</body>
<script>

    // 获取webgl的上下文
    var canvas = document.getElementById('webgl');
    var gl = canvas.getContext('webgl');

    // 设置清空颜色
    gl.clearColor(0, 1, 1, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 初始化着色器（定点着色器和片段着色器）
    // 顶点着色器：就是定义点的位置、大小
    // 片元着色器：定义画出来的物体的材质（颜色、反光度等...）
    var vs_source = document.getElementById('shader-vs').innerHTML,
        fs_source = document.getElementById('shader-fs').innerHTML;

    // 创建顶点着色器对象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    // 给顶点着色器对象绑定定义代码
    gl.shaderSource(vertexShader, vs_source);
    // 编顶点译着色器对象
    gl.compileShader(vertexShader);

    // 创建片元着色器对象
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    // 给片元着色器对象绑定定义代码
    gl.shaderSource(fragmentShader, fs_source);
    // 编译片元着色器对象
    gl.compileShader(fragmentShader);

    // 创建一个着色器程序
    var glProgram = gl.createProgram();

    // 把前面创建的二个着色器对象添加到着色器程序中（顶点和片段着色器都需要）
    gl.attachShader(glProgram, vertexShader);
    gl.attachShader(glProgram, fragmentShader);

    // 把着色器程序链接成一个完整的程序
    gl.linkProgram(glProgram);

    // 使用这个完整的程序
    gl.useProgram(glProgram);

    // 绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);
</script>

</html>

 

相关文章