threejs内发光和外发光

参考文章链接:使用threejs实现地球辉光和大气层效果

效果:

代码:


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);','}'].join('\n');
//大气层效果
THREE.AeroSphere = {uniforms: {coeficient: {type: "f",value: 1.0},power: {type: "f",value: 2},glowColor: {type: "c",value: new THREE.Color(0xffff00)}},vertexShader: vertexShader,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函数也可以知道这个值由负变正，不透明度最终从低到高].join('\n')//辉光效果Grow
THREE.GlowSphere = {uniforms: {coeficient: {type: "f",value: 0.0},power: {type: "f",value: 2},glowColor: {type: "c",value: new THREE.Color(0xff22ff)}},vertexShader: vertexShader,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函数也可以知道这个值由负变正，不透明度最终从高到低].join('\n')
}//球体 辉光 大气层function shad() {        var material1 = new THREE.ShaderMaterial({uniforms: THREE.AeroSphere.uniforms,vertexShader: THREE.AeroSphere.vertexShader,fragmentShader: THREE.AeroSphere.fragmentShader,blending: THREE.NormalBlending,transparent: true,depthWrite:false});var material2 = new THREE.ShaderMaterial({uniforms: THREE.GlowSphere.uniforms,vertexShader: THREE.GlowSphere.vertexShader,fragmentShader: THREE.GlowSphere.fragmentShader,blending: THREE.NormalBlending,transparent: true});var sphere = new THREE.SphereBufferGeometry(16, 32, 32);var mesh = new THREE.Mesh(sphere, material1);scene.add(mesh);var sphere2 = new THREE.SphereBufferGeometry(10, 32, 32);var mesh2 = new THREE.Mesh(sphere2, material2);//mesh2.position.x = 15;scene.add(mesh2);}

threejs内发光和外发光相关推荐

图层样式之：内发光、外发光
内发光 Inner Glow 外发光 Outer Glow 内发光与外发光的选项有两处不同: 1.扩展(外发光),阻塞(内发光). 2.源(内发光),外发光无此项. 结构 Structure 混合模式 ...
Creator3D:shader9_这样的内发光你喜欢不
前言在3d游戏中有两种效果非常常见,那就是内发光和外发光.那么他们是怎样实现的呢,看了下边文章你就知道内发光是咋回事了. 效果展示正文上边的效果是上一节的下边的效果是本次的内发光两者进行对比 ...
选择图层_Photoshop思维导图，图层的高级操作
更多的PS笔记和思维导图↑↑↑. 前面分享过图层基础知识和图层混合模式的笔记,建议一起学习.Photoshop三大混合模式详解,附思维导图(速速收藏),最全的Photoshop图层知识整理,附思维导图 ...
前端页面布局常见问题/已踩过的坑大杂烩
目录一.IE8下[图片加文字]展示时自动换行的问题二.设置了z-index无效三.当文字超出范围时自动补...省略号四.实现垂直居中五.实现无缝十字边框六.Iphone APP Webvi ...
影视后期制作学习第四天（AE）
字符工具: 文字的快捷键是Ctrl+T,也可以在左上角直接点文字工具,框一下,这样文字就会一直在框里,或者在合成栏右键新建文字在窗口左下打开标题动作安全框,可以辅助文字的位置,最外面的是安全框,所有 ...
c语言给bmp图片加滤镜,图片编辑器PixelStyle: 图像处理，滤镜特效
图片编辑器PixelStyle: 图像处理,滤镜特效支持系统 OS X 10.8 价格 0 下载次数 590 官方网站 *不要错过"超级抠图",一键抠图工具,从此告别PS的蜗牛抠 ...
自定义桌面开始按钮（winxp、7、8、8.1、10）
一.首先介绍两款"开始"菜单替换软件: (1)StartMenuX (专业版需要付费,免费版少了一些功能,不影响使用,关于软件破解请自行解决) 官方有简体中文版设置问题:可以设置 ...
绘图与图片编辑工具—“Artstudio”
Artstudio Pro Mac是一款非常不错的绘画与图片编辑软件,为用户提供了27种工具:移动.选择.裁剪.吸管.油漆.湿漆.橡皮擦.油漆桶/图案/渐变填充.涂抹.减淡.燃烧.海绵.文字.修复.克 ...
使用PS（Adobe Photoshop CC）设计Banner
使用PS(Adobe Photoshop CC)设计Banner (作者:何少军撰写时间:2019年1月16日) 一.介绍PS(Adobe Photoshop CC)使用的工具以及特效 PS(Ado ...

threejs内发光和外发光

threejs内发光和外发光相关推荐

最新文章

热门文章