2020-11-19--webgl学习一--绘制一个彩色的点

37 阅读1分钟
<html>
    <head>
        <title>
            webgl程序
        </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>
    </head>
    <body>
        <canvas id='canvas' width="800" height="800"></canvas>
        <script type="text/javascript">

            var VShader="void main(){\n"+
            "gl_Position=vec4(0,0,0,1);"+
            "gl_PointSize=10.0;\n"+
            "}"
    
    
            var FShader="void main(){\n"+
            "gl_FragColor=vec4(255,0,0,1);\n"+
           
            "}"
            var canvas=document.getElementById("canvas");
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("获取webgl上下文失败")
            }
          
            if(!initShaders(gl,VShader,FShader)){
                console.log("初始化着色器失败")        
            }
            gl.clearColor(0,0,0,1)
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.POINTS,0,1)
        </script>
    </body>
  
</html>

结果 图片.png