我的webgl学习之路(一)

 我的webgl学习之路 (一)

 

做项目中偶然需要移动端3d展示,所以学习了threejs;但是有着各种限制,还有就是项目要达到好的效果肯定是需要后期处理等等,所以展开了我学习webgl之路,我刚开始毫无目的的看了很多关于webgl的博客,但是我总感觉有种没学懂的感觉,并且观看不同的资料我有着不同的感受与理解;所以我觉得,从头一步一步的来是很有必要的;综合我所有的感受,然后在从新复习一遍,尽量能从我这个新手的角度去学习,分析,讲解;请多多包涵;

 

学webgl需要的基础知识:HTML,javascript和数学知识;

 

简单介绍:

Canvas是html中的一个个标签,它表示的是一个画布,它定义了一个api可以绘制图形或者图片,可以通过JavaScript来操作这些api.其中canvas它有2d和3D;3d也就是webgl;

题外话:

我在群里听到有人在问canvas好还是webgl好;当时我就懵逼了;要么就是问canvas2d好还是webgl好,这个问题就好像问c++好还是java好,也许比喻并不恰当;canvas2d它是在cup中执行的,它是单一的线程方式,先进先出,如下图1.1而webgl它渲染是在gup中执行;它是简单的多通道执行方式,并且它们是一起执行,并行处理;如下图1.2;许多个数据排在一起统一执行,想象一下对于gup来说毫无压力;屏幕上的每个像素都代表一个简单的任务,那么处理复杂的效果对CPU来说却难以胜任;

 我的webgl学习之路(一)_第1张图片

 

我的webgl学习之路(一)_第2张图片

Gpu通道的多少取决于你的硬件gpu,gup是专门做图形渲染,如果用cup做这些工作,那么数据量太大,就成了耗时操作;等它一个一个的去计算执行不知道要等到猴年马月,特别是游戏,所以就有了GPU;而webgl的来源是OpenGL ,OpenGL是pc端的,为了小型设备于是有团队搞了OpenGL ES; 在前端日益强大的情况下又有大神搞了用js调用的webgl 内核;我就简单的介绍一下,具体就上百度查吧,比我介绍的更加详细;至于说canvas2d和webgl那个好那个快,webgl是操作gup,它是很快的,缺点是编写麻烦;那个好是相对的,对项目要求简单快捷,就画一个圆,一条线段,我当然用canvas2d,如果是复杂的3d效果我当然用webgl;而我的项目两种都被用到了;

 

介绍就到这里了,那么开始我们的学习之路:

 

我们先创建一个canvas,获取webgl的上下文,它里面封装了所有关于webgl的方法;初始化画板;

代码如下:

 

<body>
<
canvas id="canvas" style="background-color: black">canvas>

<
script>
   
onload = function () {

       
var canvas = document.getElementById("canvas");
       
canvas.width = 500;
       
canvas.height = 500;
     

        vargl =canvas.getContext("webgl");
        //指定清空canvas的颜色,也就背景颜色0
        gl.clearColor(0.0,0.0,0.0,1.0);
        //清空canvas,(清空的是颜色缓冲区)
        gl.clear(gl.COLOR_BUFFER_BIT);
   
}
script>

body>


gl.clearColor(0.0,0.0,0.0,1.0);它里面的参数是以rgba模式来放的,需要注意的是它们是float类型,范围是0到1;因为这个范围更便于OpenGL的标准化,当然也就成了webgl的标准了

 转载请注明:转自那年我七岁博客 https://blog.csdn.net/qq_25909453/article/details/80155209

你可能感兴趣的:(webgl学习之路)