WebGL
文章平均质量分 55
121
苹果园dog
这个作者很懒,什么都没留下…
展开
-
Cesium与Three相机同步(3)
Cesium与Three融合的案例demo。原创 2024-07-01 15:39:01 · 293 阅读 · 0 评论 -
Cesium与Three相机同步(2)
现在是将Cesium相机同步到Three相机,从而实现了相机双向同步。之前实现了将Three相机同步到Cesium相机。原创 2024-05-23 11:38:15 · 549 阅读 · 3 评论 -
Cesium 坐标拾取Pick(1)
在Cesium中坐标的拾取非常重要,比如在标绘、测量等功能中需要获取地球表面、地形、三维模型、实体元素等物体表面的经纬度和高程,这样绘制的图形才能准确,拿到的坐标才可以使用。原创 2024-02-22 14:32:07 · 1274 阅读 · 0 评论 -
Threejs 地图插件
【代码】Threejs 地图插件。原创 2024-01-26 11:39:02 · 557 阅读 · 0 评论 -
Cesium 材质模块开发流程——方式2
Cesium 材质模块开发流程——方式2原创 2022-10-14 13:53:04 · 614 阅读 · 0 评论 -
Cesium 材质模块开发流程——方式1
1、在/effect 下面创建MaterialProperty文件,继承自MaterialPropertyBase。设计可开发好相关变量,比如颜色、中心点坐标等;【必须步骤】原创 2022-10-13 13:32:16 · 608 阅读 · 1 评论 -
Cesium常用VERTEX_FORMAT快捷方式
asdfasdfasdfasf原创 2022-10-12 16:50:11 · 772 阅读 · 0 评论 -
Cesium 三维模型在线调整工具
经过上面的平移、缩放、旋转后 此时模型矩阵=M×T×S×R原创 2022-08-04 13:39:55 · 1063 阅读 · 1 评论 -
Cesium基础功能——底图选择和绘制/测量功能
Cesium基础功能——地图选择和绘制/测量功能绘制的线或面被模型遮挡显示虚线,优化展示效果。综合考虑鼠标交互绘制过程中拾取位置的情形,优化场景支持。原创 2022-08-02 16:31:57 · 896 阅读 · 8 评论 -
webgl函数 step与smoothstep
一、简介step有两个参数,拿第二个参数值和第一个比较。smoothstep有三个参数,判断第三个参数与前两个参数的关系。这个函数和clamp近似,clamp是直线,smoothstep是曲线。二、测试...原创 2022-05-18 00:25:03 · 1399 阅读 · 1 评论 -
webgl函数 clamp
一、简介参考资料:The Book of Shaders: clampclamp函数将一个值限制在另外两个值之间y = clamp(x,0.0,1.0);二、代码#ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform vec2 u_mouse;uniform float u_time;void main() { vec2 st = gl_FragCoord.xy/.原创 2022-05-13 00:39:51 · 707 阅读 · 0 评论 -
webgl函数 mix
一、简介mix函数用于混合两个颜色得到新的颜色。有3个参数分别是颜色1,颜色2,以及混合比例。二、代码#ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform vec2 u_mouse;uniform float u_time;void main() { vec2 st = gl_FragCoord.xy/u_resolution; vec4 color1=ve原创 2022-05-12 01:01:54 · 1845 阅读 · 1 评论 -
Cesium 中的Shader解析2
采用纯WebGL实现纹理贴图,并修改shader,对比Cesium中的实现,从而感受Cesium对WebGL的封装,以及用法上的异同点。原创 2022-05-05 00:19:07 · 1776 阅读 · 0 评论 -
Cesium 中的Shader解析1
Cesium中在创建点、线、面、球等Geometry的时候,可以动态指定材质。材质用于设置物体的外观。通常修改材质的片元着色器来改变外观。原创 2022-05-04 21:04:56 · 6432 阅读 · 2 评论 -
Cesium对WMS地图服务接口调用过程解析
一、概述本文主要介绍Cesium对WMS地图服务GetFeatureInfo接口的调用过程。示例中介绍的WMS地图服务采用GeoServer发布。二、WMS地图服务Web地图服务(Web Map Service,简称WMS)将地理信息动态生成空间参考数据的地图。WMS提供了一个简单的HTTP接口,用于从一个或多个分布式地理空间数据库请求地图图像。WMS请求定义了要处理的地理图层和感兴趣的区域。对请求的响应是一个或多个可以在浏览器应用中显示的地图图像(以JPEG、PNG等格式返回)原创 2022-02-24 11:20:33 · 3153 阅读 · 0 评论 -
Cesium 几何体和外观(Geometry & Appearances)
0、概述本教程将向您介绍Primitive API 的 Geometry & Appearances(几何体和外观)系统。这是一个高级主题,用于通过自定义网格、形状、体积和外观扩展CesiumJS,并不适合Cesium初学者。声明:内容均来自Cesium官方教程,经翻译和整理而成。原文链接:https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/一、几何体(Geometry)Cesiu翻译 2021-12-10 17:05:30 · 1564 阅读 · 1 评论 -
Cesium 若干绘制示例
一、效果1、水流效果2、曲线插值3、流动箭头线4、飞鸟二、代码 鸟/* * @Author: 苹果园dog * @Date: 2021-04-07 10:14:19 * @LastEditTime: 2021-04-12 18:39:52 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \web\cesiumS\ces原创 2021-04-13 12:00:28 · 1595 阅读 · 13 评论 -
WebGL 鼠标点击绘制点
<!-- * @Author: 苹果园dog * @Date: 2020-11-19 10:59:00 * @LastEditTime: 2020-11-19 18:19:23 * @LastEditors: Please set LastEditors * @Description: WebGL中的绘制操作实际上是在颜色缓冲区中绘制的,绘制结束后系统将缓冲区中的内容显示在屏幕上, 然后颜色缓冲区就会被重置,其中的内容会丢失。因此我们有必要将每次鼠标点击的...原创 2021-01-29 10:26:02 · 411 阅读 · 0 评论 -
WebGL绘制三角形
<!-- * @Author: 苹果园dog * @Date: 2020-11-20 15:42:15 * @LastEditTime: 2020-11-20 17:34:46 * @LastEditors: Please set LastEditors * @Description: webgl提供了一种很方便的机制,即缓冲区对象(buffer object),它可以一次性地向着色器传入多个顶点的数据。 缓冲区对象是是webgl中的一块内存区...原创 2021-01-29 10:24:00 · 292 阅读 · 0 评论 -
Pannellum 360全景图片展示
1、介绍Pannellum是用于Web的轻量级,免费和开放源代码的360全景图片查看器。它是使用HTML5,CSS3,JavaScript和WebGL构建的,没有插件。提供了大图片切片工具generate.pyPython脚本,可展示多分辨率图片。2、影像切片也可以不切片,但是图片太大就要切片,可提高加载效率。提供了docker镜像,可免于安装依赖,切片过程如下(win10系统):3、使用方法var viewer = pannellum.viewer('panoram.原创 2021-01-26 17:46:35 · 851 阅读 · 1 评论