美文网首页
WebGL学习记录(1)

WebGL学习记录(1)

作者: ShineaSYR | 来源:发表于2020-12-10 09:59 被阅读0次

    WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 <canvas>元素可被用来通过JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画。")元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。

    (PS: 引用来源于mdn官方文档)

    WebGL可以简单理解为主要是对3D绘制在网页端的图形规范,只需支持的浏览器即可进行访问体验,无需额外的插件or本地应用程序。

    基础概念

    1. 三维坐标系(x/y/z轴);顶点→多边形→网格/模型;纹理映射(位图)、材质(凹凸效果、辉光效果等)、光源;变换(模型缩放、旋转、位移等)通过矩阵;相机、透视、视口、投影(三维需要投射成二维展示);着色器。
    2. 使用WebGL把图形渲染到页面中,至少需要执行以下步骤
    • 创建一个画布元素(canvas);
    • 获取画布的上下文(content);
    • 初始化视口;
    • 创建一个或者多个包含渲染数据的数组(通常是顶定数组);
    • 创建一个或者多个矩阵,将顶点数组变换到屏幕空间中;
    • 创建一个或者多个着色器来实现绘制算法;
    • 绘制。

    参考书目

    • 《WebGL入门指南》

    相关文章

      网友评论

          本文标题:WebGL学习记录(1)

          本文链接:https://www.haomeiwen.com/subject/gqllwktx.html