WebGL着色器绘制正方形

最新推荐文章于 2023-11-03 23:39:47 发布

weixin_30369041

最新推荐文章于 2023-11-03 23:39:47 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tongyuzhe/p/10452642.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="lib/webgl-debug.js"></script>
    <script type="text/javascript" src="lib/webgl-utils.js"></script>
    <script type="text/javascript" src="lib/cuon-utils.js"></script>
    <script type="text/javascript" src="lib/cuon-matrix.js"></script>
</head>

<body>
<canvas style="border: red solid 3px;" id='webgl' width='500' height='500'>不支持</canvas>
<script>
    //顶点着色器程序
    var VSH =
        'void main(){\n' +
        'gl_Position = vec4(0.0,0.0,0.0,1.0);\n' + //坐标
        'gl_PointSize = 100.0;\n' + //尺寸
        '}\n';

    //片元着色器程序
    var FSH =
        'void main(){\n' +
        'gl_FragColor = vec4(1.0,0.5,0.9,1.0);\n' + //颜色
        '}\n';

    var canvas = document.getElementById('webgl');
    var gl = getWebGLContext(canvas);
    initShaders(gl,VSH,FSH); //初始化着色器
    gl.clearColor(0.0,0.0,0.0,1.0); //指定背景色
    gl.clear(gl.COLOR_BUFFER_BIT); //填充
    gl.drawArrays(gl.POINTS,0,1); //绘制一个点
    /*
        因为绘制的是单独的点，所以是gl.POINTS
        第二个参数为0，表示从第一个顶点画起
        第三个参数为1，表示在程序中只绘制了一个点
     */
</script>
</body>
</html>

转载于:https://www.cnblogs.com/tongyuzhe/p/10452642.html

weixin_30369041

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL着色器绘制正方形

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="lib/webgl-debug.js"><...
复制链接

扫一扫