WebGL的shader
WebGL的shader(着色器)有2种:vertexShader(定点着色器)和 fragmentShader(片段着色器)
顶点着色器:定义点的位置、大小
片元着色器:定义画出来的物体的材质(颜色、反光度等...) 着色器定义有自己的一套语言:GLSL(Graphics Library Shading Language) 推荐阅读:https://blog.csdn.net/qq_37338983/article/details/78556063http://www.alloyteam.com/2017/03/teach-you-to-use-webgl-to-quickly-create-a-small-world/
例如用WebGL画一个点:
<head>
<!-- 顶点着色器 定义代码 -->
<script type='x-shader/x-vertex' id='shader-vs'>
void main(){
gl_Position=vec4(100,0.0,0.0,1000);
gl_PointSize=10.0;
}
</script>
<!-- 片元着色器 定义代码 -->
<script type='x-shader/x-fragment' id='shader-fs'>
void main(){
gl_FragColor=vec4(0.0,0.0,1.0,1.0);
}
</script>
</head> <body>
<canvas id='webgl' width='400' height='400'></canvas>
</body>
<script> // 获取webgl的上下文
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl'); // 设置清空颜色
gl.clearColor(0, 1, 1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT); // 初始化着色器(定点着色器和片段着色器)
// 顶点着色器:就是定义点的位置、大小
// 片元着色器:定义画出来的物体的材质(颜色、反光度等...)
var vs_source = document.getElementById('shader-vs').innerHTML,
fs_source = document.getElementById('shader-fs').innerHTML; // 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 给顶点着色器对象绑定定义代码
gl.shaderSource(vertexShader, vs_source);
// 编顶点译着色器对象
gl.compileShader(vertexShader); // 创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 给片元着色器对象绑定定义代码
gl.shaderSource(fragmentShader, fs_source);
// 编译片元着色器对象
gl.compileShader(fragmentShader); // 创建一个着色器程序
var glProgram = gl.createProgram(); // 把前面创建的二个着色器对象添加到着色器程序中(顶点和片段着色器都需要)
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader); // 把着色器程序链接成一个完整的程序
gl.linkProgram(glProgram); // 使用这个完整的程序
gl.useProgram(glProgram); // 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
</script> </html>
WebGL的shader的更多相关文章
- 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建
目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...
- WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据
毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染:最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手. ...
- 前端3D引擎-Cesium自定义动态材质
本文代码基于Vue-cli4和使用WebGL的地图引擎Cesium,主要内容为三维场景下不同对象的动态材质构建. 参考了很多文章,链接附在文末. 为不同的几何对象添加动态材质 不知道这一小节的名称概况 ...
- 用shader实现流动的水面(webgl)
这段时间一直在看如何用shader绘制一个流动的水面,直接用贴图(高度图.法向贴图)实现的方法,这里就不讨论了. 搜了一大波博客资料,感觉存在如下一些问题: 1⃣️大多数资料都是基于opengl实现( ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- webgl动画小测试
// MultiPoint.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Po ...
- 多材质(Shader)实现
最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体 ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
- Cesium原理篇:6 Render模块(3: Shader)
在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Textur ...
随机推荐
- 一个炒鸡好用的pdf阅读器
下载地址:https://www.sumatrapdfreader.org/free-pdf-reader.html 一个关系很好的同事推荐的pdf阅读器 之前用的感觉不错 每次都记不住 自己收 ...
- 红帽linux系统开机自启动脚本。
其实很多东西在最后完成以后会觉得也就那样,有意思的是探究的过程. 前段时间老板要求把一个程序做成linux系统开机自启动脚本的模式. 首先你需要写一个脚本. 我这边建立了一个.sh的脚本,就是用脚本启 ...
- Django-2.0 汉化
1.语言 LANGUAGE_CODE = 'zh-hans' 2.时区 TIME_ZONE = 'Asia/Shanghai' 3.字段名汉化 models.CharFielf(verbose_nam ...
- pytorch报错:AttributeError: 'module' object has no attribute '_rebuild_tensor_v2'
转载自: https://blog.csdn.net/qq_24305433/article/details/80844548 由于训练模型时使用的是新版本的pytorch,而加载时使用的是旧版本的p ...
- linux命令启动关闭firewalld防火墙,添加端口
firewalld管理防火墙常用命令 1.查看防火墙的状态 [root@localhost HMK]# firewall-cmd --state 查看防火墙的运行状态 not running [r ...
- flask小结
http通讯过程 https://www.cnblogs.com/andy9468/p/10871079.html 1.flask开发环境 https://www.cnblogs.com/andy94 ...
- python 爬虫抓取 MOOC 中国课程的讨论区内容
一:selenium 库 selenium 每次模拟浏览器打开页面,xpath 匹配需要抓取的内容.可以,但是特别慢,相当慢.作为一个对技术有追求的爬虫菜鸡,狂补了一些爬虫知识.甚至看了 scrapy ...
- nginx负载均衡简单实例
nginx分配服务器策略 1.轮询(默认) 每一个请求按时间顺序逐一分配到不同的祸端服务器,如果后端服务器 down 掉,能自动抵触 2.weight(权重) weight代表权重,默认为1,权重越高 ...
- 目标检测 — one-stage检测(一)
总结的很好:https://www.cnblogs.com/guoyaohua/p/8994246.html 目前主流的目标检测算法主要是基于深度学习模型,其可以分成两大类:two-stage检测算法 ...
- 类似于ORACLE decode 的用法
SQL Server 2008中的写法:select t.PROJECTNAME, t.BUILDCONTENTSCALE, CASE t.PROJECTLEVEL WHEN '0' TH ...