3D可视化开发（基于顶点着色器和片元着色器）

背景：最近在做大屏的3d地图可视化开发，技术采用three.js+glsl这样的是一种实现方式，其中使用glsl实现顶点着色器和片元着色器。

GLSL
GLSL是OpenGL的着色语言，它是为图形计算量身定制的，并包含一些针对向量和矩阵操作的有用特性。
顶点着色器
顶点着色器控制了几何体如何渲染，在GPU中运行并计算出最终顶点位置，顶点在openGL中是一种图元，它的维度小于3，一个顶点(Points)、2个顶点(Lines)、3个顶点(Triangles)，着色器控制这些图元的位置坐标，最终通过gl_Position输出。
片元着色器
片元着色器处理物体材质、灯光等信息，决定了每个片元的颜色，同时也是在GPU中运行。最终通过gl_FragColor输出。
坐标系的转换
一个小姐姐画的图，坐标系的转化、矩阵转换，模糊的理解就是矩阵相乘，目前还在继续探索学习中。
球体demo实现
1、在CPU中计算好了物体的模型数据，其中包括Vertex, Index, UV, Normal。Vertex顶点模型坐标，Normal法线用于计算光照; Index顶点在生成图元阶段顶点的索性，UV用于纹理，此处用的全局光，所以normals没有用；

 const indices= Float16Array(points)const vertices = Float32Array(points * 3);const colors = Float32Array(points * 3);const normals = Float32Array(points * 3);.......const geometry = new THREE.BufferGeometry();geometry.setIndex(indices, 1);geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); // vertices是顶点的模型坐标geometry.addAttribute('aColor', new THREE.BufferAttribute(colors, 3)); geometry.addAttribute('aNormal', new THREE.BufferAttribute(normals, 3));

顶点着色器

 attribute vec3 aColor;varying vec3 vColor;uniform float u_size;void main() {vColor = aColor;gl_PointSize = abs(sin(u_size)) * 20.0;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}

片元着色器

varying vec3 vColor;
void main() {vec2 pc = gl_PointCoord.xy;float _distance = distance(pc, vec2(0.5, 0.5));if (_distance > 0.5) {gl_FragColor = vec4(vColor, 0.0);} else {gl_FragColor = vec4(vColor, 1.0);}
}

最终效果

最近的我

开发&&工作
今天周六，上午睡觉、中午睡觉、下午加班，晚上写blog，现在正在公司工位写最近的我，10点多啦。接触3D可视化一个月，从15年开始接触了可视化，但一直都局限在2D用于BI分析的图表，现在工作有3D需求，然后去负责双11大屏的团队学习了2周，感觉路还很长，革命尚未成功，还要继续努力。

生活&&思想
前段时间我告诉大湿胸说我想去做演员，因为演员可以感受很多不同的人生，并且有很多的体验，每天还可以美美的，看很多的美景，总之感觉就是很好啦。刚好一个盆友是制片人，我还特地找她说了我的天真的想法，她说可以呀，估计也是觉得不太好拒绝，所以就随便答应啦…
这个周我告诉大湿胸说我想以后不coding之后去做心理医生，研究一下神奇的人类，现在越来越好奇。
周四的晚上加班，旁边一个小伙伴忽然问我什么时候结婚，我很懵逼的回答不造啊，估计结不了啦。因为没时间找男盆友也木有谈恋爱，555555…，然后回家路上发了一条忧心忡忡的心情。

3D可视化开发（基于顶点着色器和片元着色器）相关推荐

顶点着色器到片元着色器的过程，varying变量
varying 变量: 从顶点着色器向片元着色器中传入数据. varying 变量只能是float(以及相关的vec2,vec3,vec4,mat2,mat3,mat4). 前面我们了解到顶点着色器是 ...
webgl着色器初学习-顶点着色器和片元着色器
文章目录 webgl工作步骤顶点着色器片元着色器案例 webgl工作步骤每一个像素点都将执行这两个着色器我理解为这两个着色器,顶点着色器决定渲染位置 ,片元着色器决定颜色顶点着色器编写一 ...
数字孪生综合管廊3d可视化开发
项目介绍二院国际化经营能力稳步提升,经营规模持续扩大,对企业数字智能化管理需求越发紧迫,我们为航天二院某城区综合管廊基于真实的地理信息.设备.人员.施工及资产等数据信息,利用数字孪生可视化技术搭建基 ...
ThreeJS-前端3D可视化开发入门-vue
1.npm安装threejs 创建vue项目(略) 执行如下命令:安装threejs相关模块 npm install three npm install three-css2drender npm i ...
基于webgl、封装threejs的3d物联网可视化开发平台
webgl可视化平台,封装threejs进行快速数据对接,使用Echarts图表结合webgl可视化平台进行数据对接,3D物联网开发选哪个?前端人员能不能跑来搞3D可视化开发?用什么可以简单快速建模? ...
java 顶点着色_Shader笔记_002简单顶点/片元着色器扩展
参考<>第五章一.如何获取其他模型数据在001里介绍了通过POSITION获取顶点位置坐标,如果想的到更多的模型数据,比如我们想要得到模型上每个顶点的纹理坐标和法线方向 PS:我们可以 ...
【Unity Shader】学习顶点/片元着色器
上一篇博客重点放在了Unity Shader的基本结构,分别介绍了它包含的三个语义块,最后简单介绍了Unity Shader的形式:表面着色器.顶点/片元着色器和固定函数着色器. 趁热打铁,今天接着上 ...
UnityShader入门精要笔记1——顶点/片元着色器结构与BRDF（基本光照模型）——实现漫反射
文章目录 BRDF(基本光照模型) 实现漫反射光线强度的计算好现在开始写Shader 新建Shader 添加一个Properties语义块添加SubShader和Pass. 使用CG/HLSL语 ...
南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.伴随我国工业转型数字化的不断推进,企业厂区以智能制造为核心的智慧厂房计划正不断加速落地实施,越来越多的制造企业逐步加入工业数字化 ...

3D可视化开发（基于顶点着色器和片元着色器）

3D可视化开发（基于顶点着色器和片元着色器）

3D可视化开发（基于顶点着色器和片元着色器）相关推荐

最新文章

热门文章