mozilla
您的搜索结果

    初识 WebGL

    WebGL 使 HTML 的 canvas 中的 web 内容在支持的浏览器中使用基于 OpenGL ES 2.0 的 API 来进行3D渲染。

    本文将向您介绍使用 WebGL 的基础此处假定您对三维图形数学已经有了一定的理解,本文也不会试图向您教授 OpenGL 本身。

    准备 3D 渲染

    为了使用 WebGL 进行 3D 渲染,你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。

    <body onload="start()">
      <canvas id="glcanvas" width="640" height="480">
        Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
      </canvas>
    </body>
    

    准备 WebGL 上下文

    在我们的 JavaScript 代码中的 start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 并开始渲染内容。

    var gl; // WebGL的全局变量
    
    function start() {
      var canvas = document.getElementById("glcanvas");
    
      gl = initWebGL(canvas);      // 初始化 GL 上下文
      
      // 只有在 WebGL 可用的时候才继续
      
      if (gl) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // 设置擦除颜色为黑色,不透明
        gl.enable(gl.DEPTH_TEST);                               // 开启“深度测试”, Z-缓存
        gl.depthFunc(gl.LEQUAL);                                // 这里设置深度测试,满足(深度小或相等的时候才渲染)
        gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // 清除深度缓存的颜色
      }
    }
    

    首先我们这里是保存 canvas 的引用,并保存在 ‘canvas’ 变量上。很显然,并不需要重复引用 canvas,所以保存为局部变量或一个对象成员变量即可。

    当我们有了 canvas,我们调用 initWebGL() 函数。这是我们等下马上会创建的函数,它的作用是初始化WebGL上下文。

    如果上下文成功创建后, gl 会保存它的引用。在这个例子上,我们设置擦除颜色为黑色,然后将上下文擦除。然后,将这个上下文用指定参数配置好。在这里,我们开启了“深度测试”,并指定深度测试的设置为测试通过才渲染(测试条件为:对象深度小或相等的时候才渲染)。

    以上代码,就完成了初始化的3D上下文的目标了。

    创建 WebGL 上下文

    initWebGL() 函数代码实现如下:

    function initWebGL(canvas) {
      // 创建全局变量
      window.gl = null;
      
      try {
        // 尝试创建标准上下文,如果失败,回退到试验性上下文
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      }
      catch(e) {}
      
      // 如果没有GL上下文,马上放弃
      if (!gl) {
        alert("Unable to initialize WebGL. Your browser may not support it.");
      }
    }
    

    为了得到 canvas 的 WebGL 上下文,我们请求来自 canvas 的名为"WebGL"的上下文。如果失败,我们回退到"试验性的WebGL"。如果同样失败,我们将显示一个警告来告诉用户,浏览器不支持WebGL。这是创建 WebGL 上下文的所有步骤。现在,gl 可能是空(意思浏览器不支持 WebGL ),或者是我们即将用于渲染的 WebGL 上下文的引用。

    Note: “experimental-webgl” 上下文是一个临时名称的上下文,用于处于开发中的标注实现,当标准制定下来后,将会使用 "WebGL" 

    现在,你已经写完了 “WebGL” 初始化的代码,下一步你应该会看到一个大大的黑色盒子,它将在等待并接受内容。

    如果你在运行一个支持WebGL的浏览器,可以点击查看这个例子

    调整 WebGL 上下文尺寸

    在获得一个新的 WebGL 上下文的同时,它会自动设置它的视窗分辨率为 canvas 元素的高度和宽度,而不是根据其 CSS 样式。修改 canvas 元素的样式将改变它的显示大小,但不会改变它的渲染分辨率。在上下文创建后,修改 canvas 元素的宽度和高度,并不会改变上下文绘画的像素数量。要改变 WebGL 渲染的分辨率,如在用户重新调整浏览器窗口的大小,该页面的显示是全部基于 canvas 元素,也或者你希望这个页面是支持嵌套在其他 App 中能够自适应窗口的绘画设置,你就需要调用 WebGL 上下文的 viewport() 函数去解决这些问题。

    gl.viewport(0, 0, canvas.width, canvas.height);

    当 canvas 在渲染与它所设定的 CSS 显示不同的分辨率,它会经过缩放处理。CSS 缩放在大部分情况下,能够为渲染低分辨情景节省资源,并提升浏览器的效率。缩小尺寸可能会产生 超级采样抗锯齿(Super Sampling Anti Aliasing) 的效果(尽管会有原生本地应用的效果,但是会占用极高的性能花费)。最好采用多重采样反锯齿(Multi-Sample Anti-Aliasing)和用户浏览器实现的纹理过滤器,如果可用的话,相对于强制缩放,使用浏览器图像规约算法(browser's image reduction algorithm)会有一个更好的效果。

    文档标签和贡献者

    此页面的贡献者有: RobberPhex, Zhining, ziyunfei, braveoyster, teoli, zhuzisheng
    最后编辑者: braveoyster,