WebGL简易教程(一):第一个简单示例

文章目录

  • 1. 概述
  • 2. 示例:绘制一个点
    • 1) HelloPoint1.html
    • 2) HelloPoint1.js
      • (1) 准备工作
      • (2) 着色器
      • (3) 顶点着色器
      • (4) 片元着色器
      • (5) 清空缓冲区
      • (6) 绘制操作
  • 3. 结果
  • 4. 参考

1. 概述

不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了。NeHe的学习教程还有之前用的《OpenGL编程指南》第七版(也就是红宝书)都非常好,可惜它们都是从固定管线开始讲起的;而现在可编程管线的技术已经是非常常见的基础技术了。后来我还看过《OpenGL编程指南》第八版(白皮书),这本教程是从可编程管线(着色器)开始讲起的,看的时候就觉得没有前面的基础打底,显得非常的晦涩,远不如红宝书易懂。羞愧的说,我已经多次入门失败了。

这也正是我写这篇教程的原因,希望从繁杂的资料中总结真正有用的知识(当然也希望能帮助到你)。我觉得WebGL是学习OpenGL系列三维图形渲染技术很好的入门点。WebGL是OpenGL的浏览器版本,基本上可以认为是OpenGL的子集,能被WebGL保留而不剔除的技术,必须是三维图形渲染技术的精华。在这里给大家强烈推荐《WebGL编程指南》这本书,我这篇教程正是在这本书的基础之上总结出来的。

在学习OpenGL/WebGL的时候,我还感觉到很多资料举得例子往往都太简单了,确实是一看就懂,但是在实际遇到的问题的时候却往往解决不了。我还是认为在实际中解决问题,更能加深对知识的理解。正好最近我在研究GIS中地形的绘制,那么我就通过一步一步绘制地形的示例,来总结WebGL的相关知识。如果你不懂GIS这些术语也不要紧,只需要知道我这里的最终目的是想绘制的是一个大地高程模型,是一个包含XYZ坐标的点集,表达了地形的情况。

2. 示例:绘制一个点

编写WebGL程序跟编写Web前端程序的步骤是一样的,包含HTML和JavaScript两个部分,通过浏览器进行调试。

1) HelloPoint1.html


<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Draw a point (1)title>
  head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    canvas>

    <script src="../lib/webgl-utils.js">script>
    <script src="../lib/webgl-debug.js">script>
    <script src="../lib/cuon-utils.js">script>
    <script src="HelloPoint1.js">script>
  body>
html>

这一段HTML非常简单,从实际表现上来说就是创建了一个画布是HTML5引入的的一个绘制标签,可以在画布中绘制任意图形。WebGL正是通过元素进行绘制的。
除此之外,这段代码还通过

你可能感兴趣的:(#,WebGL)