全文共有三个章节:无论你是否有开发经验,都能带你了解🫡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建模的工具和资源,这些应该可以使你更形象的认识抽象的东西,并且也能为你提供学下去的动力,😄
2.51建模网_3D建模_免费3d模型下载_3d建模网_建模渲染
好的,今天学到这里,我们下一篇见~
对了,所有的资源和代码例子都在我GitHub上,感谢支持