自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 minemap 3.0 加载影像

自从用了minemap3.0,我连球都玩儿不来了,神奇的改造,需要自己添加影像,不添加就永远都是模糊的。 http://dev.minedata.cn/minemapapi/demo-3.0.0/#base_map <!DOCTYPE html> <html lang=&q...

2020-07-13 18:58:35 5 0

原创 three.js 光锥

走到后面,发现其实好多效果都是贴图实现的,光锥也不例外, 实现原理是通过两个相互垂直的平面+渐变贴图实现的 let texture = new THREE.TextureLoader().load('./lightray_yellow.jpg'), ...

2020-07-10 13:41:44 37 0

原创 three.js流动道路

此前探索过流动线的实现方式,看到另一个案例,学习了另一种实现流动道路的方法 用到了一个开源计算库 https://github.com/yszhao91/xtorcga

2020-07-07 11:18:59 59 0

原创 three.js 流动线shader实现方式(伪)

原文来至,在原文的基础上,优化了一些逻辑 https://blog.csdn.net/weixin_43842660/article/details/97940152 <!DOCTYPE html> <html lang="en"> <...

2020-07-02 11:58:57 119 0

原创 cesium蓝色立方体 -建筑物

主要依靠于贴图,使用的图片 //已成功 var arrowMaterial = new Cesium.Material.fromType('Image', { image : './building.png', ...

2020-07-02 10:32:07 172 0

原创 three.js lensare光源

一般用来模拟太阳光光晕 效果: 其实从调用的逻辑来推测(没看过源码),就是贴图,将太阳、光线、光晕分别沿 点光源起点和target这条直线贴 核心逻辑,由于示例中的光线贴出来是横向的,因此直接抹去 // 添加 lens flares const textureLoader...

2020-06-30 10:33:45 40 0

原创 three.js 后处理 理解

后处理的效果也实现了几种了,但仅限于cv,都还未做理解,借着对自定义shader的实现,谈谈对后处理接口的使用理解。 要实现后处理效果,应有3个步骤 1:初始化后处理的入口,即 new THREE.EffectComposer(renderer); 后处理的基础包,使用它来渲染场景、应用通道和...

2020-06-29 18:04:53 45 0

原创 three.js 后处理-自定义shader 扫光效果

先上效果吧 shader来源于 https://www.cnblogs.com/eco-just/p/11667713.html 源代码: <!DOCTYPE html> <html> <head> <meta charset=&...

2020-06-29 17:46:57 107 0

原创 three.js 选中效果

function initThree(elid) { let scene,camera ,renderer,viewer,el viewer={} el = document.getElementById(elid) const ...

2020-06-24 11:41:07 84 0

原创 three.js中使用html2canvas

其核心是基于材质可以使用canvas,这样所有的html元素都可以作为geometry的材质来使用 document.body.insertAdjacentHTML('beforeend', "<div class='capture'...

2020-06-24 11:11:22 49 0

原创 three.js动态扩散圆

主要就是用圆柱体的API,贴图过后,动态改变其scale就行了,下面是所用的图片,也是渐变的 function transparentObject(geometry, material) { var obj = new THREE.Object3D(); ...

2020-06-22 15:07:22 175 0

原创 three.js后处理之FXAA 抗锯齿

引入的js <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/cont...

2020-06-17 13:59:10 79 0

原创 three.js后处理之 BokehPass 背景虚拟化,模糊

引入的js <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/cont...

2020-06-17 13:46:47 59 0

原创 three.js后处理之 afterimage-运动幻影效果

使用的js <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/contro...

2020-06-17 13:37:49 51 0

原创 three.js后处理之 聚焦效果focus

类似于舞台聚光灯的效果 引入的js <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/thr...

2020-06-17 11:42:43 50 0

原创 three.js后处理之bloom 泛光

引入文件 <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/contr...

2020-06-16 17:51:20 152 0

原创 three.js后处理之outline

three的后处理接口相较于cesium来说复杂的多, 要引入5个js,这些js具体是干啥的,还没去看,先实现吧 <script src="../../plugins/EffectComposer.js"></script> <script ...

2020-06-16 16:26:58 64 0

原创 three.js飞线--适用于迁徙图

https://github.com/ecojust/flyline记录一下、

2020-06-14 16:28:15 73 0

原创 three.js光效扫描

<script src="../../plugins/ys/ys.min.js"></script> <script src="../../plugins/threeLibrary/three.min.js"></s...

2020-06-14 16:22:04 140 0

原创 three.js使用shader材质

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...

2020-06-14 15:24:14 128 0

原创 three.js流动线

此功能借助meshline插件来实现最为简便,初学就暂不探究其原理了。 github地址: https://github.com/spite/THREE.MeshLine 本文主要学习了跃焱邵隼作者的源代码,但由于作者已将自己的插件一步一步壮大,导致初学时,无法准确切入到核心,因此特别记录一下...

2020-06-14 14:30:21 122 0

原创 python批量查询两地的行驶距离

# encoding: utf-8 import json import requests import pandas as pd def getLngLat(name): url='http://api.map.baidu.com/geocoding/v3/?output=js...

2020-06-12 14:28:15 170 0

原创 将shadertoy的效果移植到cesium中

采用后处理方式接口作为shader的入口 原效果地址 https://www.shadertoy.com/view/MdlXz8 最终实现代码,参照前几篇博文就可以顺利做出来了。 原文的分辨率是自己获取的,初学就直接写死了 let viewer = new Cesium.Vie...

2020-06-12 10:53:43 143 0

原创 cesium内置shader变量说明

尝试将shadertoy的效果搬到cesium上面来,但shadertoy有许多内置变量,因此开一篇博客记录一下cesium中内置的变量,会慢慢更新 1 v_textureCoordinates:片元坐标,已经归一化了,在渲染后处理中会遇到 ...

2020-06-11 19:16:21 124 0

原创 js 宏任务与微任务 ,promise.resolve与new promise的区别

看到有很多试题是关于这个的,抽空看了一下,记录一下吧; 而宏任务一般是:包括整体代码script,setTimeout,setInterval。 微任务:Promise,process.nextTick。 首先记住一个原则,js是单线程的,通过事件驱动,那么就有一个叫事件队列的东西,...

2020-06-11 11:58:33 143 0

原创 three.js 创建线

初学three,发现创建线的代码有一些区别,以下两种方式可以发现,最后实际上都是以line来构建渲染对象最终,添加到scene中 还有一种方式是直接根据mesh来创建,目前还无法掌握,暂不列 <!DOCTYPE html> <html lang="en"...

2020-06-08 09:04:54 60 0

原创 three.js添加鼠标交互

目前主要是引入OrbitControls.js进行控制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2020-06-03 09:17:45 72 0

原创 shdertoy学习系列4- 雷达(2)

上文中的雷达仅绘制了圆边和扫描线,渐变区域还未添加 #define PI 3.1415926535897932384626433832795 // 绘制线,传入参数,圆心,线的终点, 片元坐标 float LineToPointDistance2D( vec2 a, vec2 b, vec...

2020-05-25 11:45:20 86 0

原创 shadertoy学习2 -全局变量学习

初学shader,有很多陌生的知识,一步步记录吧; iResolution: 指的是canvas的分辨率 例如指定canvas大小为 width:800,height:600,则iResolution.x为800; iTime : 着色器已经运行的时间,以秒为单位 fragCoord...

2020-05-25 11:06:50 84 0

原创 shdertoy学习系列3 雷达(一)

源码链接:https://www.shadertoy.com/view/XdsXRf #define PI 3.1415926535897932384626433832795 // 绘制线,传入参数,圆心,线的终点, 片元坐标 float LineToPointDistance2D( v...

2020-05-25 11:06:27 103 0

原创 vue嵌入到htlm页面中

起源是公司购买了炎黄盈动的产品,当初宣传的时候,各种流程管理配置方便快速,结果接手以后各种坑;交钱之后就技术支持就爱理不理了,有幸看到的人,千万不要购买他们家的产品;技术老套jqury+jsp,惊呆了; 子组件本来可以局部注册的,但是没找到方法,反正这种方式也是迫不得己,试着使用吧 ...

2020-05-22 08:42:04 96 0

原创 cesium贴图

entiyty方式加载的 var outlineOnly = viewer.entities.add({ name : 'Yellow box outline', position: Cesium.Cartesian3.fromDegrees(-100.0, 40....

2020-05-11 10:42:24 372 0

原创 cesium 路径漫游

之前写过相似的轨迹回放,按路径飞行demo的理解,但与实际数据结合起来的时候还是花了一些时间。 且之前的数据是已经处理成满足cesium要求的格式的了,实际上很多时候并不是,因此重新来梳理如何实现这个效果 先看数据格式 拿到这样的json之后,我们需要将时间与postion成对的存入pr...

2020-05-07 16:41:55 293 0

原创 openlayers加载超图发布的wfs服务

首先要阅读wfs文档,跟当初cesium加载wmts一样。 http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100/utf-8 主要包括三个部分 Capability:指该服务具有的能力 查询具有哪些...

2020-05-07 15:32:35 226 0

原创 cesium 点云渲染探索二

跟踪代码可以发现,cesium中的绘图操作在drawCommand中; 顶点着色器: attribute vec3 a_position; varying vec4 v_color; uniform vec4 u_pointSizeAndTimeAndGeometricErrorAn...

2020-04-17 17:24:30 301 2

原创 cesium 点云渲染探索一

由于公司本身的点云数据已经是经过切片索引的,不需要通过中间过程处理; 因此考虑改造ceisum原生的渲染点云函数;在此之前就得先理解原来的点云是如何渲染的; 追踪代码逻辑,可以发现点云的嵌套调用逻辑如上图所示; 输入参数为tileset.json,真正获取索引子级文件中的数据在fetch...

2020-04-15 17:40:38 377 0

原创 shadertoy学习1 -hello shadertoy

void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord/iResolution.xy; if(uv.x*uv.x+uv.y*uv.y>0.01){ fragColor ...

2020-04-14 17:22:00 109 0

原创 webgl阴影 shadowmap 实现原理

由于一直没搞明白cesium中可视域分析是怎么完成的,因此转而研究webgl中阴影的实现,然后去理解cesium中shadowmap的实现原理,(cesium可视域分析就是基于shadowmap来完成的)。 由于看webgl的时候跳过了一些高级技术,导致在学习阴影这个demo时,出现了一些问题;...

2020-04-14 11:12:15 282 0

原创 webgl 指南 click points

// ClickedPints.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\...

2020-04-08 16:56:02 75 0

原创 cesium bloom效果

实际上核心就是获取bloom对几个属性值进行设置 let viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: mapbox, ...

2020-04-07 15:58:35 785 0

提示
确定要删除当前文章?
取消 删除