WebGL入门篇（1）

全文共有三个章节：无论你是否有开发经验，都能带你了解🫡webgl是什么，能做什么，以及怎么学习和使用webgl开发。

言归正传什么是WebGL？

WebGL（全称Web Graphics Library），它是一种3D绘图协议，技术标准支持JavaScript和OpenGL ES 2.0，WebGL能为HTML5 Canvas提供硬件3D加速渲染，可以让Web开发人员依靠系统显卡将3D场景和模型展现在浏览器，常见的有导航和数据视觉化还有类似极品飞车、魔兽这样的3D游戏。

WebGL有如此强大和好玩的体验，那么要怎么学习和开发呢？古语有云：欲戴皇冠，必受其重，学习的过程中，会遇到很多苦难，需要找很多资料，才得到理解或者始终还是不理解。可能有时候为了明白一个迷惑，要花费几天的时间。我可肯定的告诉你，每一个学习者都是会遇到的。例如光线怎么去跟踪、又比如游戏中运动时正投影与透视投影的效果混合，技能特效，工具菜单等。

好了，做好了这些心理准备，我们一鼓作气开始接下来学习开发～

一.知识准备

首先你要对，js和css以及html语言，对于canvas可以少有涉及，毕竟webgl更多使用的API是对GPU操作以及和canvas相关的。

接下来我们先看一个例子：

rains 下雨的动画：

 

<script src="./webgl-utils.js"></script>
...
<canvas id="rain"></canvas>
...
    'use strict'
    const gl = document.querySelector('#rain').getContext('webgl')
    const vs =`
      attribute float vertexId;
      uniform float numVerts;
      uniform float time;

      float hash(float p){
        vec2 p2 = fract(vec2(p*5.3983,p*5.4427));
        p2+= dot(p2.yx,p2.xy+vec2(21.5351,14.3137));
        return fract(p2.x*p2.y*95.4337);
      }

      void main() {
        float u = vertexId/numVerts;
        float off = floor(time+u)/1000.0;
        float x = hash(u + off)*2.0 - 1.0;
        float y = fract(time + u)*-2.0 + 1.0;

        gl_Position = vec4(x,y,0,1);
        gl_PointSize = 2.0;
      }
    `;

    const fs = `
    precision mediump float;

    void main(){
        gl_FragColor = vec4(0,0,1,1);
    }
    `;

    const program = webglUtils.createProgramFromSources(gl,[vs,fs]);
    const vertexIdLoc = gl.getAttribLocation(program,'vertexId');
    const numVertsLoc = gl.getUniformLocation(program,'numVerts');
    const timeLoc = gl.getUniformLocation(program,'time');

    const numVerts = 400;
    const vertexIds = new Float32Array(numVerts);
    vertexIds.forEach((v,i)=>{
        vertexIds[i] = i
    })

    const idBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER,idBuffer)
    gl.bufferData(gl.ARRAY_BUFFER,vertexIds,gl.STATIC_DRAW)

    function render(time){
        ..
          gl.drawArrays(gl.POINTS,offset,numVerts)
          requestAnimationFrame(render)
    }
    requestAnimationFrame(render)

 上面的例子是直接使用的WebGL官方api，怎么样看起来是不是比较麻烦和晦涩难懂，不要慌，接着往下看。

二.常用WebGL第三方库

不管是哪种语言，为了避免重复的写冗余的代码，大神们总会起到先锋的作用开发并集成为框架，常使用的3D库如下：

1.three.jsThree.js – JavaScript 3D Library

2.​ 百度的 pissang/clayglGitHub - pissang/claygl: A WebGL graphic library for building scalable Web3D applications

3.韩国人的RedGL, 特效非常棒 filament.jsGitHub - google/filament: Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2

4.微软Babylon.js, 语言风格是ts GitHub - BabylonJS/Babylon.js: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

 我使用three多一些，可以先看一个three.js例子:

const threeRef = ref()
        function init() {
            const scene = new Scene()
            const axes = new AxesHelper(20)
            scene.add(axes)

            const renderer = new WebGLRenderer({ antialias: true })
            renderer.setClearColor(new Color(0xEEEEEE))
            renderer.setSize(window.innerWidth, window.innerHeight+60)

            const planeGeometry = new PlaneGeometry(60, 20)
          const planeBasicMaterial = new MeshBasicMaterial({ color: 0xcccccc })
          const plane = new Mesh(planeGeometry, planeBasicMaterial)
          plane.rotation.x = -0.5 * Math.PI
          plane.rotation.x = 30
          plane.position.y = 0
          plane.position.z = 10
          scene.add(plane)

          const cubeGeometry = new BoxGeometry(4, 4, 14) //盒子
          const cubeMaterial = new MeshBasicMaterial({ color: 0xff0000, wireframe: true })
          const cube = new Mesh(cubeGeometry, cubeMaterial)
          cube.position.x = 10
          cube.position.y = 3
          cube.position.z = 10
          scene.add(cube)

          const sphereGeometry = new SphereGeometry(4, 20, 20) //球形
          const sphereMaterial = new MeshBasicMaterial({ color: 0x77777ff, wireframe: true })
          const sphere = new Mesh(sphereGeometry, sphereMaterial)
          sphere.position.x = 40
          sphere.position.y = 4
          sphere.position.z = 10
          scene.add(sphere)

          const camera = new PerspectiveCamera(80, window.innerWidth / window.innerHeight)
          camera.position.x = -30
          camera.position.y = 40
          camera.position.z = 30
          camera.lookAt(scene.position)
          threeRef.value.appendChild(renderer.domElement)
          renderer.render(scene,camera)

怎么样，是不是比直接使用WebGL的API 看起来简洁很多，而且结构也更加清晰，事半功倍。

三.常用3D建模网站

接下来是了解一些3D建模的工具和资源，这些应该可以使你更形象的认识抽象的东西，并且也能为你提供学下去的动力，😄 

1.免费 - 微元素 - Element3ds.com!

2.51建模网_3D建模_免费3d模型下载_3d建模网_建模渲染

好的，今天学到这里，我们下一篇见～

对了，所有的资源和代码例子都在我GitHub上，感谢支持