首页 > 其他分享 >Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十三)

Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十三)

时间:2022-12-29 09:46:15浏览次数:53  
标签:glsl 可视化 babylonjs Mapbox float js vec2 mapbox 1.0

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

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

  • npm i @haibalai/mapbox-babylonjs

 

初始化mapbox-babylonjs 类库, map 是mapbox.gl 的map 对象

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

 

添加特效

  • import { BabylonMapManager } from "@haibalai/mapbox-babylonjs";
  • const fragmentShader =
  • `
  • #ifdef GL_ES
  • precision mediump float;
  • #endif
  • vec2 resolution = vec2(1.0,1.0);
  • varying vec2 vUv;
  • #define PI 3.14159265358979323846
  • uniform float time;
  • voidmain(void)
  • {
  • float pi = atan(-1.0) * 4.0;
  • vec2 uv = (vUv -0.5) * 1.0 ;
  • float c = fract(abs(cos(time*1.5)));
  • float r = length(uv);
  • for (int i = 0; i < 3; ++i)

Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十三) - 小专栏

标签:glsl,可视化,babylonjs,Mapbox,float,js,vec2,mapbox,1.0
From: https://www.cnblogs.com/haibalai/p/17011742.html

相关文章

  • Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十九)
    我决定不从Babylonjs基础来讲了直接整合mapbox与babylonjs可视化来讲我整合一个类库后续不断更新中npmi@haibalai/mapbox-babylonjs 初始化mapbox-babylonjs......
  • Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十八)
    我决定不从Babylonjs基础来讲了直接整合mapbox与babylonjs可视化来讲我整合一个类库后续不断更新中npmi@haibalai/mapbox-babylonjs 初始化mapbox-babylonjs......
  • 还原压缩过的JS代码
    转载地址:https://blog.csdn.net/ChenLan_R/article/details/109899442有时不免会碰到的JavaScript代码被压缩为.min.js格式,难以阅读,比如:  其实想要还原这种代码很简......
  • react 脚手架搭建项目 报错C:\Program Files\nodejs\node_cache\_logs\2022-12-2
    报错内容: 解决方法:第一步:删除C:\ProgramFiles\nodejs\node_cache\_logs目录下所有文件  第二步:切换镜像 npmconfigsetregistryhttps://registry.npm.tao......
  • [JSOI2018]机器人
    题目描述一个\(n\timesm\)的网格,有一个机器人一开始在\((1,1)\),每次机器人可以向右或向下走一步,\((i,m)\)的右边是\((i,1)\),\((n,j)\)的下边是\((1,j)\),机器人需要不重......
  • #yyds干货盘点#nodejs 后端 token 权限问题
    话不多说,直接上代码登录接口exportdefaultclassAuthController{staticasynclogin(req,res){try{const{name,password}=req.body;if(!nam......
  • 科普什么是JS混淆加密解密以及其价值
    JavaScript混淆加密是一种将JavaScript代码转换为不易被人阅读和理解的形式的技术。它通常用于保护代码的知识产权和减少被恶意修改的风险。使用​​JavaScript混淆加......
  • json 和java对象 互相转换(java)
    ava解析json使用alibaba的fastJson添加依赖或者jarfastJson简单使用JSON>Java对象java对象>jsonpublicclassMyJson{publicstaticStringjson......
  • Unity3D_使用JsonUtility读取Json
    使用Unity内置的方法对json进行写入与读取,不依赖任何插件和dll使用到的API读取:JsonUtility.FromJson<T>(stringjson)JsonUtility.FromJsonOverwr......
  • json和Java对象相互转换的四种方法
    第一种方法:原生解析首先要分析json的格式,这里首先是一个json对象(即JsonObject),里面还嵌套有一个json数组(即JsonArray),jsonarray里面又是一个json对象分析清楚那就可以进行......