发布了文章2024-01-28
使用 WebGL 原生的 LINES、LINE_STRIP 或 LINE_LOOP 渲染线会有很多问题,例如,如果你的机器运行的 WebGL 底层是 ANGLE,那么最大线宽(像素)只能是 1.
发布了文章2023-10-16
CesiumJS 有两种卷帘,一种是 ImageryLayer 的对比,一种是 3DTiles 或 Model 的对比。官方示例均能找到,目前仅支持左右对比。1. 核心原理1.1. 影像图层对比原理通过控制不同 ImageryLayer 所处的地球瓦片(QuadtreeTile、GlobeSurfaceTile)的透明度实现。可以在 G...
发布了文章2023-05-21
你知道吗?Cesium 是元素 铯 的英文单词,而 铯原子钟 具有世界上最高的计时精度时间,是时刻间隔的意思,时刻是静态的点;而时间就指有起止时刻的一段范围很多应用都要有一个时钟,例如 GPS 授时、实时渲染系统,时间可以测量很多事物,万物运动也体现了时间在流逝1...
发布了文章2023-04-16
之前对实时渲染(RealTimeRendering)的殿堂就十分向往,也有简单了解过实时渲染中的光,无奈一直没能系统学习。鉴于笔者已经有一点 CesiumJS 源码基础,所以就抽了一个周末跟了跟 CesiumJS 中的光照初步,在简单的代码追踪后,发现想系统学习光照材质,仍然是需要 R...
提出了问题2023-04-12
发布了文章2023-04-09
这篇如果 Vue 和 CesiumJS 不发生史诗级的变动,应该不会再有后文了。主要是这类文章没什么营养。这篇主要修正上篇 [链接] 中一些插件的变化,并升级开发服务器的版本。心急的朋友拉到文末,有示例工程链接下载。1. 本篇适用范围与目的1.1. 适用范围严格使用 Vue3 + ...
赞了文章2023-03-28
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多相关内容的文章,我之前就写过一篇《Three.js 实现3D全...
发布了文章2023-03-01
CesiumJS 能用的 WMTS 目前只支持两种切片方案(TilingScheme):0 级瓦片有 2 个的 GeographicTilingScheme0 级瓦片只有 1 个的 WebMercatorTilingScheme光说很抽象,上图:0 级瓦片有 2 个的投影,是直接以经纬度数值展平成平面,众所周知:$$ 纬度跨度:经度跨度 =...
发布了文章2023-02-13
明确一个定义,在 Primitive API 中应用着色器,实际上是给 Appearance 的 vertexShaderSource、fragmentShaderSource 或 Material 中的 fabric.source 设置着色器代码,它们所能控制的层级不太一样。但是他们的共同目的都是为了 Geometry 服务的,它们会随着 Cesium...
发布了文章2023-02-12
Primitive API 还包括 Appearance API、Geometry API 两个主要部分,是 CesiumJS 挡在原生 WebGL 接口之前的最底层图形封装接口(公开的),不公开的最底层接口是 DrawCommand 为主的 Renderer API,DC 对实时渲染管线的技术要求略高,可定制性也高,这篇还是以 Prim...
发布了文章2023-02-05
这篇介绍的在 Awesome GIS 基本上都有,经过我的筛选,在 npmjs.com 上也都能找到,方便融入日益强大的 npm 生态。不过这些库大部分都保留了全局库的形式,在非框架中也能使用。有一部分是浏览器 + NodeJS 双端可用的。
赞了文章2022-12-20
很多时候,在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事,因为之前并没有直接的方法,只能通过直线和圆弧间接组合而成,下面是一个常规绘制方式
赞了文章2022-10-26
今天要说的是一个困扰我好几个月的问题,Visual Studio Code(下文简称VSCode)在使用中突然增高,风扇开始狂转,温度骤增,影响心情的故障原因。
发布了文章2022-10-25
CesiumJS 和 glTF 之间有一段很长的合作关系。在 2012 年,CesiumJS 就实现了一个 glTF 加载器,是最早的一批加载器了,当时的 glTF 叫做“WebGLTF”。
赞了文章2022-10-12
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页排行榜效果这里的主要交互有以下几个鼠标滑过触发选中...
赞了文章2022-09-18
熟悉 Typescript 配置选项是 TS 项目开发的最基本要求。TS 使用 tsconfig.json 作为其配置文件,它主要包含两块内容:
发布了文章2022-09-01
如何创建前端 WebGPU 项目?1. 丐版 HelloWebGPU最简单的 WebGPU 程序应该是这样的: {代码...} 将上面的代码保存成 index.html,双击打开就可以在控制台看到输出的对象:如果你是什么都不会的新手,那么接下来这几个问题我只说一次。当然,老手可以选择性跳过。① 为...
发布了文章2022-08-31
原文 [链接]本文如何使用 WebGPU 的时间戳查询(timestamp-query)功能来计算你的 GPU 指令执行耗时。在 WebGPU 中,时间戳查询是一项可选功能,不一定全部实现版本都有。撰写本文时,出于安全考虑,在浏览器上是禁用的(具体原因参考 gpuweb/gpuweb #2218)概述下面...
发布了文章2022-08-26
由于 Vue2 已经进入维护期,且 Vue2 对待组件内的 data 是无差别使用 Object.defineProperties 递归将其劫持的,对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的 性能问题,这个应该是老生常谈了。
发布了文章2022-08-08
截止发文,1.97 还未发布,但已经在源码仓库完成了 Model API 的替换,文章会跟进。本文着重介绍新的构建指令的用法(配套 esbuild 的使用),见第三节。