Skip to content

Instantly share code, notes, and snippets.

@wewindy
wewindy / index.js
Created July 18, 2024 20:19
CesiumPolylineST
// http://localhost/cedoc/Apps/Sandcastle/index.html#c=nVXbbts4EP2VgV8qAw7tXAosHMdomqZFgMYu2mxRYF20lETZRChS4MWRW/jfd0hZN9f7si82Z+acw+FoOEyUNBa2nL0wDTcg2QvcMcNdTr4GX7QaJMG+U9JSLpleDYbXK5kEnkmYZEir+CSYGKzD3v2oUiYQ8nslAcopTEYruQ+Ywz7PUiXPylliNU2eo4Yz7AhZpURMfYKpSlzOpCVrZu8F88u3u4cU0zxgqvSOtWlRiN1bLlMu16bdY1QrdzdLnLEq/7KhaSjJTyd5pnQOW5ZcQaKE0gjuOZXdMH13FMmEohbKSvhX/iOnlmlOBXgDs3882FE3+CALZ6FnDVcy1A6gp9IsbmrBdyyjTrS6fZXrSgPzvQA85E1/E2JsC8ADORuO48UPx/IxnkFkLClhDuUQDllBF92rhI/tq796M5LyLHPG90zNInodXx+hqCg2tIuhB4Rm1mnZANG7/xkqPB7DJyV2AjsUls76//p7+hKFziSF5jm3fMsMoSn2DEp2Gv5THY0OJ1szlTOrdw+oQiVeg2kX/uEoGjX1qHk9eJ1dTWvhAFQnT7uCTWvsbWWTxXJxP2phhTKYH56pAd5RbXFF5SXJtMrfsbVmzNxqTXfRPy0R4Oz8YkImo67r8thx9tf/gFy87jm+DzvGC0/tZnqssmWYc/kerwi10+Pq1M17WxSMal9W8vX+89P9tx/vl58fb58anX29UbOgDeVk3f9Ubr9A3U49YnOPOh8qo7HmyRR+d0twuPDmyA3V1elphmaOzrEeMCGv/c/VCNAcjvrM9hqdoE8q+lXgT07y/Zwllz3nvmcZ5bQvVHfWdQD7/6zzHsfR8NT49kE/lJexYXpLY8G6Y3Y1KHEwB4xxsUk0j1mUOZn4foaonSYlXtaFy2N8ecphZ+xws6ALdHXGTjUL+nNGkLYNSDNO6i9EvHp5XZ0D/wajwczYnWDzWvMNzwulLTgtI
@wewindy
wewindy / CesiumScale.ts
Created June 2, 2024 16:12
CesiumScale
const clamp = (val: number, min = 0, max = 1) => {
return val > min ? val > max ? max : val : min
}
export const getCesiumScale = (distanceToCamera: number, nearFarScalar: NearFarScalar) => {
const nearScalar = nearFarScalar.nearValue
const farScalar = nearFarScalar.farValue
const nearDistance = nearFarScalar.near
const farDistance = nearFarScalar.far
@wewindy
wewindy / index.js
Created February 21, 2024 19:12
Cesium Amap Tiles
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url: 'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=1&style=7',
subdomains: '1234',
tileWidth: 512,
tileHeight: 512,
}));
viewer.resolutionScale = 2;
@wewindy
wewindy / main.js
Created January 8, 2024 15:35
Double side shading by real-view-direction
const viewer = new Cesium.Viewer("cesiumContainer");
const primitives = viewer.scene.primitives;
const fs = `czm_material czm_getMaterial(czm_materialInput materialInput) {
czm_material m = czm_getDefaultMaterial(materialInput);
float side = dot(materialInput.positionToEyeEC, materialInput.normalEC);
m.alpha = side > 0.0 ? 0.9 : 0.4;
m.diffuse = side > 0.0 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);
@wewindy
wewindy / main.js
Created December 15, 2023 17:07
quaternion-rotation-3d
const viewer = new Cesium.Viewer("cesiumContainer", {
msaaSamples: 4,
});
const origin = Cesium.Cartesian3.fromDegrees(112.5, 22.3);
const targetENU = Cesium.Cartesian3.fromElements(
Math.sqrt(1 / 2) * 200,
Math.sqrt(1 / 2) * 200,
); // east-north 平面上的一点
const enuMat = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
@wewindy
wewindy / limit-cesiumjs-camera-tilt.js
Created September 19, 2023 20:01
Limit CesiumJS Camera Tilt
const viewer = new Cesium.Viewer("cesiumContainer");
const globe = viewer.scene.globe;
const camera = viewer.scene.camera;
const scratchNormal = new Cesium.Cartesian3();
const previousPosition = new Cesium.Cartesian3();
const previousDirection = new Cesium.Cartesian3();
const previousUp = new Cesium.Cartesian3();
const previousRight = new Cesium.Cartesian3();
@wewindy
wewindy / a_or_b_segmentLine_entity.js
Last active September 18, 2023 11:03
「CesiumJS」Draw Dynamic Segment Line
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.globe.depthTestAgainstTerrain = true;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
const getWC = (windowPosition) => {
return viewer.scene.pickPosition(windowPosition);
};
const FILL_COLOR = Cesium.Color.fromBytes(255, 101, 41, 255 * 0.6);
const OUTLINE_COLOR = Cesium.Color.fromBytes(255, 255, 255, 255 * 0.8);
@wewindy
wewindy / Cesium Sandcastle DepthColorMap.js
Last active September 19, 2023 13:43
Canvas2D RGBA-TypeArray ImageBitmap ImageData
function appendTextureViewCanvas(id) {
const root = viewer.container.parentNode;
const cesiumCanvas = viewer.canvas;
const canvas = document.createElement('canvas');
canvas.id = id;
canvas.setAttribute('width', cesiumCanvas.clientWidth);
canvas.setAttribute('height', cesiumCanvas.clientHeight);
canvas.style.width = `${Math.floor(cesiumCanvas.clientWidth / 4)}px`;
canvas.style.height = `${Math.floor(cesiumCanvas.clientHeight / 4)}px`;
@wewindy
wewindy / coplanar-real3d-space-polygon.js
Last active July 6, 2023 11:43
cesium-polyline-primitive
const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;
const positions = [
new Cesium.Cartesian3(1000, 500, 100),
new Cesium.Cartesian3(1000, -500, 0),
new Cesium.Cartesian3(-1000, -500, 0),
new Cesium.Cartesian3(-1000, 500, 100),
];
const polygonGeometry = Cesium.CoplanarPolygonGeometry.fromPositions({
@wewindy
wewindy / skylinePostProcessStage.ts
Created October 31, 2022 08:30
Cesium Skyline PostProcessStage
const fragmentShaderText = /* glsl */`uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
varying vec2 v_textureCoordinates;
void main() {
float depth = czm_readDepth(depthTexture, v_textureCoordinates);
vec4 color = texture2D(colorTexture, v_textureCoordinates);
if (depth < 1.0 - 0.000001) {
gl_FragColor = color;