首页 > 其他分享 >Cesium 与 Babylon.js 可视化 glsl 特效篇(八)

Cesium 与 Babylon.js 可视化 glsl 特效篇(八)

时间:2023-03-15 09:58:22浏览次数:238  
标签:glsl 1.0 float js cesium vec2 vec3 Cesium define

我决定不从Babylonjs 基础来讲了 直接整合cesium与babylonjs可视化来讲

我整合一个类库 后续不断更新中

  • npm i @haibalai/cesium-babylonjs

 

初始化cesium -babylonjs 类库, map 是cesium 的viewer对象

  • import { BabylonMapManager } from "@haibalai/cesium-babylonjs";
  • BabylonMapManager.init(map);

 

添加特效

  • import { BabylonMapManager } from "@haibalai/cesium-babylonjs";
  • const fragmentShader = `
  • #define SMOOTH(r,R) (1.0-smoothstep(R-1.0,R+1.0, r))
  • #define RANGE(a,b,x) ( step(a,x)*(1.0-step(b,x)) )
  • #define RS(a,b,x) ( smoothstep(a-1.0,a+1.0,x)*(1.0-smoothstep(b-1.0,b+1.0,x)) )
  • #define M_PI 3.1415926535897932384626433832795
  • #define blue1 vec3(0.74,0.95,1.00)
  • #define blue2 vec3(0.87,0.98,1.00)
  • #define blue3 vec3(0.35,0.76,0.83)
  • #define blue4 vec3(0.953,0.969,0.89)
  • #define red vec3(1.00,0.38,0.227)
  • #define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))
  • constfloat ratio = 1.0;
  • float PI = 3.1415926;
  • uniform float iTime;
  • const vec2 iResolution = vec2(1200.0,1200.0);
  • varying vec2 vUv;
  • floatmovingLine(vec2 uv, vec2 center, float radius)
  • {
  • //angle of the line
  • float theta0 = 90.0 * iTime;
  • vec2 d = uv - center;
  • float r = sqrt( dot( d, d ) );
  • if(r<radius)

Cesium 与 Babylon.js 可视化 glsl 特效篇(八) - 小专栏

标签:glsl,1.0,float,js,cesium,vec2,vec3,Cesium,define
From: https://www.cnblogs.com/haibalai/p/17217415.html

相关文章