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



  • post_cover
    最近的学习中心转向了WebGL了,我还是希望能够通过这样一个机会,把WebGL学好,到时候为网站添加一些有意思的功能。🤤
    我使用的开发环境呢,是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 顶一下


Log in to reply
 

走马观花

最近的回复

  • 这个错误没多大影响,qt模块可以在QT setting里进行勾选

    read more
  • 如果对操作不是很熟悉或者是操作不便的话,也可以在Windows的命令行执行NDK的安装。参数是一样的:
    Windows命令行安装NDK

    read more
  • 忘记补充图片了。这里需要点击更新安装才行。😆
    点击更新安装

    read more
  • 问:
    如何在Qt Creator安装NDK呢?
    除了那个🔽 按钮外,还有别的办法吗?
    答:
    Qt Creaator 4.11中更加整合了Android SDK Manager。其实大家都可以不运行默认的Android SDK Manager,直接在Qt Creator中选项->设备->Android,就可以进行操作了。

    通过````高级选项……,启动一些Android SDK Manager,只需要带上参数ndk-bundle```。原来没有NDK的你,也可以通过Android SDK Manager安装了。很简单吧。
    Android SDK Manager安装NDK

    read more

关注我们

微博
QQ群