shadermaterial 实现大气层效果和辉光效果

1.创建两个球体，一个一小，一个略大的作为他的辉光
2.作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）
3.将覆盖原物体的部分丢弃

辉光效果

var vertexShader = ['varying vec3  vVertexWorldPosition;','varying vec3  vVertexNormal;','varying vec4 vFragColor;','void main(){','   vVertexNormal   = normalize(normalMatrix * normal);',//将法线转换到视图坐标系中' vVertexWorldPosition    = (modelMatrix * vec4(position, 1.0)).xyz;',//将顶点转换到世界坐标系中'  // set gl_Position',' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);','}']var  fragmentShader: ['uniform vec3   glowColor;','uniform float    coeficient;','uniform float   power;','varying vec3 vVertexNormal;','varying vec3 vVertexWorldPosition;','varying vec4  vFragColor;','void main(){','   vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;',    //世界坐标系中顶点位置到相机位置到的距离' vec3 viewCameraToVertex = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;',//视图坐标系中从相机位置到顶点位置的距离' viewCameraToVertex  = normalize(viewCameraToVertex);',//规一化' float intensity     = coeficient + dot(vVertexNormal, viewCameraToVertex);','   if(intensity > 0.65){ intensity = 0.0;}','    gl_FragColor        = vec4(glowColor, intensity);','}'//vVertexNormal视图坐标系中点的法向量//viewCameraToVertex视图坐标系中点到摄像机的距离向量//dot点乘得到它们的夹角的cos值//从中心向外面角度越来越大（从锐角到钝角）从cos函数也可以知道这个值由负变正，不透明度最终从高到低

大气层效果

var vertexShader = ['varying vec3  vVertexWorldPosition;','varying vec3  vVertexNormal;','varying vec4 vFragColor;','void main(){','   vVertexNormal   = normalize(normalMatrix * normal);',//将法线转换到视图坐标系中' vVertexWorldPosition    = (modelMatrix * vec4(position, 1.0)).xyz;',//将顶点转换到世界坐标系中'  // set gl_Position',' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);','}']var  fragmentShader: ['uniform vec3   glowColor;','uniform float    coeficient;','uniform float   power;','varying vec3 vVertexNormal;','varying vec3 vVertexWorldPosition;','varying vec4  vFragColor;','void main(){','   vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;',    //世界坐标系中从相机位置到顶点位置的距离' vec3 viewCameraToVertex = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',//视图坐标系中从相机位置到顶点位置的距离' viewCameraToVertex  = normalize(viewCameraToVertex);',//规一化' float intensity     = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);','   gl_FragColor        = vec4(glowColor, intensity);','}'//vVertexNormal视图坐标系中点的法向量//viewCameraToVertex视图坐标系中点到摄像机的距离向量//dot点乘得到它们的夹角的cos值//从中心向外面角度越来越小（从钝角到锐角）从cos函数也可以知道这个值由负变正，不透明度最终从低到高]

分层显示透明度

'uniform vec3   glowColor;',
'uniform float coeficient;',
'varying vec3  vVertexNormal;',
'varying vec3  vVertexWorldPosition;',
'void main(){',
'  vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;',
'  vec3 viewCameraToVertex = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;',
'  viewCameraToVertex  = normalize(viewCameraToVertex);',
'  float intensity     = coeficient + dot(vVertexNormal, viewCameraToVertex);',
'  if(intensity > 0.65 && intensity < 0.8){ intensity = 0.8;}',
'  if(intensity > 0.8){ intensity = 1.0;}',
'  gl_FragColor = vec4(glowColor, intensity);',
'}'

代码参考：
https://blog.csdn.net/srk19960903/article/details/78734238
https://blog.csdn.net/lin5165352/article/details/83055606

shadermaterial 实现大气层效果和辉光效果相关推荐

Three.js实现分区Bloom辉光效果
一.效果展示辉光效果二.如何实现 1.基于EffectComposer后期渲染器. 2.借助UnrealBloomPass渲染通道,实现辉光效果. 3.了解three.js中 layers 分层的 ...
PC辉光效果一切正常，安卓辉光却没效果、显示异常（爆闪、黑屏等）
一:安卓端辉光不显示问题问题描述:项目中使用unity的PostProcessing package实现辉光的功能,在pc上辉光效果一切正常,但是打出apk在真机测试时,辉光基本没效果. 解决思路: ...
基于THREEJS场景中模型局部辉光效果
背景之前写过一个关于辉光的文章,全场景辉光(传送门),但是有些时候,我们的场景只需要一部分模型辉光,这就是本文的背景.还是基于ThreeJS实现. 原理简单来说,就是做两个合成器(Composer ...
iOS 开发－绘制辉光效果
如何使曲线有辉光(荧光?)效果(glow)? 试了各种方法,最终有一点效果,觉得值得记录一下,如下. 1.最开始,我想是不是用shadow可以实现,事实证明,shadow 太淡,不醒目,如果多次sha ...
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果使用插件方式在github上有glow的插件可以使用,效果不错. 地址:https://github.com/jeromeetienne/threex.g ...
GraphicsLab Project之辉光（Glare，Glow）效果
作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...
three.js创建地球带大气层、辉光、云层、凹凸、高光
文章目录 three.js创建地球 1.基本场景搭建 2.添加地球 3.添加轨道控制器 4.添加云层 5.添加大气层 6.添加星空背景 7.添加辉光效果 8.添加轨道卫星 9.TS重构 10.打包发布 ...
GPU Gems1 - 21 实时辉光（Real-Time Glow）
这章浅墨的文章讲的很细了,这里基本照扒一遍加深印象,原文链接:https://zhuanlan.zhihu.com/p/36499291 [章节概览] 这章讲到2D光照效果中的辉光(Glow)和光晕( ...
threejs 局部辉光
首先看一下局部辉光的效果. 困扰很久的问题,终于解决了!!! 具体找到解决的方法是看了这里和这里2.也是看了这两个帖子之后才找到解决方法. 这种辉光效果也是用后期处理方法,大家可以先看官网上的这个例子 ...

shadermaterial 实现大气层效果和辉光效果

shadermaterial 实现大气层效果和辉光效果相关推荐

最新文章

热门文章