从WebGL到Babylonjs
从WebGL到Babylonjs
一、关于WebGL
- 前世今生 OpenGL => OpenGL ES => WebGL
- 本质:通过js代码去调用OpenGL的一系列Api
二、WebGL程序的构成
1、一个简单的webgl程序
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');
const vertexShaderSource = `#version 300 es
in vec4 position;
void main() {gl_Position = position;
}`;
const fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 outColor;
void main() {outColor = vec4(0, 1, 0.5, 1);
}`
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);const prg = gl.createProgram();
gl.attachShader(prg, vertexShader);
gl.attachShader(prg, fragmentShader);
gl.linkProgram(prg);const triangleVAO = gl.createVertexArray();
gl.bindVertexArray(triangleVAO);const vertexPositions = new Float32Array([0, 0.7, 0.5, -0.7, -0.5, -0.7]);const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);const positionLoc = gl.getAttribLocation(prg, 'position')
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(prg);gl.drawArrays(gl.TRIANGLES, 0, 3);
最终输出
可以看到、为了画一个三角形花了四十行代码,看起来很多,但是大部分是webgl相关的操作(上面以gl.
开头的代码)
写起来是非常麻烦和不易理解的
如果对webgl的具体执行流程感兴趣可以访问这个在线网站
[https://webgl2fundamentals.org/webgl/lessons/resources/webgl-state-diagram.html?exampleId=samplers#no-help]
2、为了更好的理解,我们可以把WebGL程序分成两个部分
2.1 js代码
- 数据的准备(模型加载、纹理图像加载)
- 向GPU传输数据
2.2 着色器代码
- 顶点着色器(VertexShader)
负责处理顶点数据,顶点位置变换
- 片元着色器(FragmentShader)
负责一个着色函数,让每一个像素点都经过这个函数处理,最终变成一个新的像素值
可以把他们理解为两个函数,分别对顶点和像素数据进行一些操作
三、WebGL(OpenGL)的渲染管线(Render PipeLine)
完整流程
白色部分大多是GPU自动处理的,而绿色部分是可由开发人员自由控制的,我们对GPU的操作也大都集中在这两个部分。
上面的完整渲染管线看起来非常复杂,当经过简化之后大概就是下面这张图,看起来非常简洁明了
通俗的解释一下:
模型数据进入显存之后,首先会经过顶点着色器,一般在这里处理模型顶点位置的变换
接下来经过片元着色器,在这里根据灯光、材质、贴图等数据计算出最终的颜色
最后输出到屏幕
四、Babylonjs
4.1 和WebGL的区别
- WebGL:一系列的API
- Babylonjs:对WebGL更高一级的抽象
比如在Babylon中新建一个立方体,看似只有一行代码, 但是在背后它可能就自动帮你完成了顶点数据准备,着色器创建、编译,数据绑定、数据传输...
等工作
4.2 几个主要的概念
- Engine:负责与WebGL的直接交互
- Scene:一个大的场景树,管理着所有Mesh、Light、Camera等
- Camera:相机,决定着观察者的视角,本质就是一个矩阵
- Light:灯光,点亮场景,可以理解为片元着色器里面的一个输入参数
- Mesh:网格,一个可渲染对象,包含了单次渲染的必要数据
- Material:片元着色器里面的一群输入参数
- Geometry:存储着顶点的位置数据等
4.3 与webgl的对应关系
在渲染时,可以理解为每个mesh都执行了一遍render方法
在渲染当前mesh的时候,把当前mesh相对应的顶点、贴图数据、program等设置为激活状态,然后调用一次drawCall指令,GPU就会安装预定好的渲染管线结合mesh的这些数据开始绘制
当场景中的mesh遍历完之后,一个完整的render就结束了
我们知道babylonjs是对webgl一层抽象,但是不管你再怎么花里胡哨抽象,在最终落实到渲染的时候还是得转换成一个标准的webgl程序,最终通过渲染管线把数据转换成像素输出到屏幕。
落实到webgl的渲染管线上,他们的大致对应关系将如下图所示
- Mesh上挂载的Geometry和Texture将会送入到显存中,其中顶点数据将会送给接下来的顶点着色器使用,Texture将会给到片元着色器使用;
- Camera将会成为MVP矩阵的一部分,决定着顶点的输出位置
- Light、Material等将会决定着片元着色器的输出颜色
五、学习资源推荐
(注:部分网站需要
从WebGL到Babylonjs相关推荐
- babylonjs 分部加载模型_用基于WebGL的BabylonJS来共享你的3D扫描模型
用基于WebGL的BabylonJS来共享你的3D扫描模型 本文由 极客范 - 杰克祥子 翻译自 Andy Beaulieu.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. ...
- babylonjs 分部加载模型_初学WebGL引擎-BabylonJS:第2篇-基础模型体验
此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码 上章代码 Babylon - Getting Started }#renderCanvas{width:100 ...
- 为什么要用babylonJS
为什么要用babylonJS webGL. threeJS. babylonJS对比 引用网上一位资深开发者的话:WebGL原生开发好比远古时期的投石索,既原始又难以控制,但通过不断使用投石索锻炼出来 ...
- WebGL、ThreeJS、BabylonJS、SceneJS和Cesium框架对比及简介
主要介绍WebGL的各个框架的特点,适用范围,优缺点以及相关网址范例:以便于后续更快速的开发,提高生产效率,最后进行总结: 一. BabylonJS(开源;JavaScript.TypeScript) ...
- WebGL探索——抉择:实践方向(twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS)
WebGL探索--抉择:实践方向,twgl.js.Filament.Claygl.BabylonJS.ThreeJS.LayaboxJS.SceneJS.ThinkJS.ThingJS 跨出第一步 新 ...
- webgl babylonjs 优化
优化babylon js webgpu方式 optimizeScene(scene); const optimizeScene = function(scene) { scene.freezeMate ...
- 【转】探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS
原文地址:https://blog.csdn.net/AceWay/article/details/51472823 介绍 在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, ...
- Web3DGame之路,Babylonjs 和TypeScript学习笔记(二)
先来认识一下Babylonjs,由于基于webgl来开发,所以先介绍一下基础知识. Webgl是一个html标准,他要在canvas元素上初始化. Html页面上的准备 所以我们先从html页面开始看 ...
- babylonjs 分部加载模型_如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域. 本文说明和演示如何使用babylon.js来加载一个标准3d模型文件,如OB ...
最新文章
- B/S软件超越C/S软件的优势在哪里?
- java latlng_【LBS】移动互联网基于LBS地理位置应用java开发必备
- 云计算&大数据 “下一幕”智能变革之力
- SQL Plan Management介绍
- metadata usage in the runtime
- 操作系统(八)进程管理——进程同步
- deepin安装mysql失败_deepin20无法安装mysql
- CSS3中display属性的Flex布局
- python函数命名空间_python (函数命名空间和作用域)
- DFS分布式文件系统安装部署
- python寻路_【PYTHON】a-start寻路算法
- java 泛型的问题_java 泛型问题?
- Android实现仿IOS带清空功能的文本输入框
- 区块链符号理论:符号方案和符号系统
- html火焰字效果,火焰字,通过PS的自带滤镜制作火焰效果文字
- 11年瑞纳手动挡值多少钱_10年瑞纳值多少钱(10年的手动高配瑞纳,跑了4万公里,现在值多少钱?)...
- 工业控制计算机固态硬盘,我们如何选择一款好的工业级固态硬盘?
- 学习记录, 带你玩转Pyppeteer (全干货)
- cad相贯展开图lisp_cad相贯线的画法
- 中国日期转化标准日期(YYYY-MM-dd)