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上,感谢支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weifont

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值