WebGL学习(一):搭建简单的WebGL环境



  • post_cover
    最近的学习中心转向了WebGL了,我还是希望能够通过这样一个机会,把WebGL学好,到时候为网站添加一些有意思的功能。:drooling_face:
    我使用的开发环境呢,是Lubuntu 17.04,还有WebStorm最新版,接着就是我自己安装的chromium-browser作为运行环境了。哦,对了,我参考的教程是《WebGL Programming Guide》。
    第一个WebGL的例子可以说非常简单,就是设置一下刷新的颜色嘛。我很快就可以写出来这样的效果:
    0_1498377425977_下载.png
    例子程序由HelloCanvas.js和HelloCanvas.html组成的。HelloCanvas.js的内容如下:

    // HelloCanvas.js
    
    function main( )
    {
        var canvas = document.getElementById( "webgl" );
    
        var gl = canvas.getContext( "webgl" );//getWebGLContext( canvas );
        if ( !gl )
        {
            console.log( "Failed to get the rendering context for WebGL" );
            return;
        }
    
        gl.clearColor( 0.0, 0.0, 0.0, 1.0 );// 这里设置的是刷新的颜色
    
        gl.clear( gl.COLOR_BUFFER_BIT );
    }
    

    HelloCanvas.html的内容如下:

    <!DOCTYPEhtml>
    <html lang=”en”>
    <head>
    <meta charset="utf-8"/>
    <title>Clearcanvas</title>
    </head>
    <body onload="main()">
    <canvas id="webgl"width="400"height="400">
    Please use the browser supporting "canvas"
    </canvas>
    <script src="HelloCanvas.js"></script>
    </body>
    </html>
    

    怎么样,很简单吧。下次我还会再来探索一下WebGL的魔力呢。



  • @jiangcaiyang 到时出套简易的 WebGL 教程


  • 管理员

    @qyvlik 我觉得可以


  • 管理员

    @jiangcaiyang 顶一下


登录后回复
 

与 萌梦社区 的连接断开,我们正在尝试重连,请耐心等待