three.js和php,前端图形学(二十二)一切绕过原生WebGl直接上ThreeJs的都是耍流氓
欢迎来到【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注。
打开搜狗搜索APP,查看更多精彩资讯
申明
从这篇文章开始,我们正式进入web3D的编程了,那么提到web3D,大家可能第一印象就想到了ThreeJs了,抱歉,正如题目所言,一切不提原生WebGl而直接开讲ThreeJs的都是在耍流氓!!!这就好比只教你使用Jquery而不管原生JS的是一个道理。
学习WebGL的必要性作为threejs的底层代码,为了更好的去理解threejs,webgl是我们绕不过去的坎儿
webgl程序是在GPU中执行,Canvas2d则是在CPU中执行。区别很大~
没有第三了……
下面就开始进入今天的主题了
webgl概念名词扫盲
着色器。
着色器是用着色器语言(GLSL)编写的程序,它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据,换句话说,它负责记录着像素点的位置和颜色。
因此,着色器有两种:一是顶点着色器(记录顶点位置),二是片元着色器(记录各顶点的颜色)。
下面先来认识一下着色器代码:
说真的,初次看到这样的代码,相信很多程序员的内心是拒绝的,因为好像看不太懂。
没关系,我来大概解释一下。
在顶点着色器代码中,void main() 为主入口方法,相信熟悉java C这些编译型语言的程序员应该很熟悉了。gl_Position = vec4(0.0,0.0,0.0,1.0);//
gl_Position 为着色器语言中的变量
gl_PointSize 一样,表示点的大小的变量。
在片元着色器中gl_FragColor =vec4(1.0,0.0,0.0,1.0);
其中:gl_Position 、gl_PointSize、gl_FragColor 都是着色器语言中的内置变量,也就是不需要申明的变量。
可以理解为我们定义了一个顶点的颜色。其中 vec4()中的4个参数分别代表颜色中的RGBA四个分量,不同的是,RGBA四个分量取值是[0~255] ,而在着色器语言中,取值则是[0~1]。
那么我们上面定义的颜色值对应的RGBA应该为(255,0,0,1);就是红色了~
值得注意的是:在着色器语言中,每一行代码的结尾处的分号(;)不可少。一定不能少,否则你懂的。
那么我们应该从现在开始建立起顶点的概念,不管是在原生的Webgl还是threeJs中,顶点的概念非常重要~
上面说到,webgl 提供API去编译着这些色器代码,然后在GPU中执行,也就是说在GPU中提供了可供开发者编程的硬件单元。而我们之前所学到的Canvas2d则是在CPU中运行。那么,也就是说,我们的CPU现在要与GPU进行交互通讯,所以我们不得不提到WebGL给我们提供的API了。
webgl执行步骤
一、获取webgl上下文对象var canvas = document.getElementById('webgl');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
var gl = canvas.getContext('webgl');
二、创建顶点着色器和片元着色器对象var vertshader = gl.createShader(gl.VERTEX_SHADER);
var flagShader = gl.createShader(gl.FRAGMENT_SHADER);
三、CPU中顶点着色器单元和片元着色器单元分别执行对应的着色器源代码,并编译着色器代码//创建顶点着色器
var vertshader = gl.createShader(gl.VERTEX_SHADER);
//在CPU中执行顶点着色器代码
gl.shaderSource(vertshader, vshareSource);
//编译顶点着色器代码
gl.compileShader(vertshader);
//创建片元着色器
var flagShader = gl.createShader(gl.FRAGMENT_SHADER);
//在CPU中执行片元着色器代码
gl.shaderSource(flagShader, fshaderSource);
//编译片元着色器代码
gl.compileShader(flagShader);
四:创建应用程序,并分别着我们的顶点着色器和片元着色器与之相关联var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertshader);
gl.attachShader(shaderProgram, flagShader);
五:连接和使用应用程序gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
六:绘制gl.drawArrays(gl.POINTS, 0, 1);
完整代码:
最后一步的绘制我们采用的是点模式的绘制,第二个参数0代表的是:从第1个点开始绘制,1表示的是绘制一个点。刚好我们的前端的顶点着色器中定义了一个点坐标。
最终效果
最终的效果就被渲染出来啦
总结
从效果图中可以看出来,我们定义的顶点是(0,0,0)的位置,最终的显示效果在画布的正中间。
说明Webgl的原点是在画布的中心点(Threejs中也是如此),而我们Canvas2d中原点是画布的左上角位置。
着色器语言的基础语法以及在CPU中编译发送到GPU中对应的硬件单元中执行。
应用程序的概念和着色器单元的关联。
webgl的最终绘制。
今天的主要内容可能比较枯燥,但是这些概念性的内容能让我们更好的理解ThreeJs,比如Threejs中的各种材质其实就是我们今天所说的着色器代码!!
以上是今天所有的分享内容。喜欢的请点赞关注,不喜欢的解散~~
这里是【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中。。。
未完待续。。。
three.js和php,前端图形学(二十二)一切绕过原生WebGl直接上ThreeJs的都是耍流氓相关推荐
- Python入门(二十二)- 常见模块2(正则表达式及容器)
二十二 常见模块2(正则表达式及容器) 22.1 正则表达式及re模块 正则表达式(Regular Expression)用于描述一种字符串匹配模式(Pattern),它可以用于检查一个字符串是否含有 ...
- 最新首途影视视频网站源码/二十二套带后台版全开源无加密源码
源码简介: 最新首途二十二套带后台版全开源无加密源码 菜单填写格式:MyTheme主题,/template/mytheme/admin/默认账号:admin默认密码:admin 下载链接 网盘源码 ...
- 【Visual C++】游戏开发五十五 浅墨DirectX教程二十二 水乳交融的美学:alpha混合技术
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/15026917 作者:毛星 ...
- 2021年大数据Hadoop(二十二):MapReduce的自定义分组
全网最详细的Hadoop文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录 本系列历史文章 前言 MapReduce的自定义分组 需求 分析 实现 第一步: ...
- 一位中科院自动化所博士毕业论文的致谢:二十二载风雨求学路,他把自己活成了光.........
4月18日,中国科学院官方微博发布消息,披露了这篇论文为<人机交互式机器翻译方法研究与实现>,作者是2017年毕业于中国科学院大学的工学博士黄国平. 这篇论文中情感真挚的<致谢> ...
- iOS 11开发教程(二十二)iOS11应用视图实现按钮的响应(2)
iOS 11开发教程(二十二)iOS11应用视图实现按钮的响应(2) 此时,当用户轻拍按钮后,一个叫tapButton()的方法就会被触发. 注意:以上这一种方式是动作声明和关联一起进行的,还有一种先 ...
- 实验二十二 SCVMM中的SQL Server配置文件
实验二十二 SCVMM中的SQL Server配置文件 在VMM 2012中管理员可以使用 SQL Server 配置文件,在部署完成虚拟机之后,实现 SQL Server 数据库服务自动化部署并交付 ...
- 插入DLL和挂接API——Windows核心编程学习手札之二十二
插入DLL和挂接API --Windows核心编程学习手札之二十二 如下情况,可能要打破进程的界限,访问另一个进程的地址空间: 1)为另一个进程创建的窗口建立子类时: 2)需要调试帮助时,如需要确定另 ...
- OpenCV学习笔记(二十一)——绘图函数core OpenCV学习笔记(二十二)——粒子滤波跟踪方法 OpenCV学习笔记(二十三)——OpenCV的GUI之凤凰涅槃Qt OpenCV学习笔记(二十
OpenCV学习笔记(二十一)--绘图函数core 在图像中,我们经常想要在图像中做一些标识记号,这就需要绘图函数.OpenCV虽然没有太优秀的GUI,但在绘图方面还是做得很完整的.这里就介绍一下相关 ...
最新文章
- Python Re 模块超全解读!详细
- c语言归并排序代码详细注释,C语言实现排序算法之归并排序详解
- Ansible简单介绍及安装部署详解
- Python中read()、readline()和readlines()三者间的区别和用法
- 6、struts.properties配置详解
- Android聊天机器人
- pc计算机怎么设置域名管理,如何设置域名的DNS服务器 -电脑资料
- 保持良好习惯,一个新的开始
- 内网穿透工具,微信支付支付宝支付的沙箱接口回调地址
- raspbian linux,如何在 Raspberry Pi 上安装 Raspbian
- linux服务器一键可视化,安装宝塔教程
- 小型超市管理系统【软件工程大作业】
- rar、zip优缺点
- python分析股票收益与投资者情绪的关系_投资者情绪与股市收益关系实证研究
- 【线性规划】基本概念
- oracle lead() over,Oracle数据库之lead over 和 lag over
- 【记录一次服务器被攻击】-[附带解决方案]
- VMware下centos7安装k8s(Kubernetes)多master集群
- python绘制花朵图案_Python实现平行坐标图的绘制(plotly)方式
- 易语言和c语言语法哪个接近点,易语言如果真、如果和判断知识点总结