ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Cesium天际线分析

2022-02-07 12:35:30  阅读:239  来源: 互联网

标签:分析 fragmentShader 天际线 uniform var Cesium paramObj name


	var obj = {
			id: "Skyline",
			name: 'czm_skylinetemp',
			//fragmentShader 细绳   uniform着色器对象  
			fragmentShader: 'uniform sampler2D colorTexture;' +
				'uniform sampler2D depthTexture;' +
				'varying vec2 v_textureCoordinates;' +
				'void main(void)' +
				'{' +
				'float depth = czm_readDepth(depthTexture, v_textureCoordinates);' +
				'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
				'if(depth<1.0 - 0.000001){' +
				'gl_FragColor = color;' +
				'}' +
				'else{' +
				'gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
				'}' +
				'}',
			url: "http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json", //加载大雁塔倾斜模型数据
			position: [114.0595, 22.539, 10], 
			heading: 0, // 方位角(heading)
			pitch: 0, // 俯仰角(pitch) 旋转角度
			roll: 360, // 滚动角(roll)
			destination:[114.0595, 22.539, 50],//相机视角
			orientation: {   
				heading : 0.0, 
				pitch : 0.0, 
				roll : 0.0                           
			}
		}

var tjx_model;
function addSkyline (paramObj) {
		var viewer = this.viewer
		var position = Cesium.Cartesian3.fromDegrees(paramObj.position[0], paramObj.position[1], paramObj.position[2]);
		var heading = Cesium.Math.toRadians(paramObj.heading);
		var pitch = Cesium.Math.toRadians(paramObj.pitch);
		var roll = Cesium.Math.toRadians(paramObj.roll);
		var hpRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
		var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
		var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter);
		//添加三维模型
		tjx_model = viewer.scene.primitives.add(
			new Cesium.Cesium3DTileset({
				url: paramObj.url, //模型数据url
			})
		);
		tjx_model.readyPromise.then(function () {
			//请求模型后执行
			tjx_model._root.transform = modelMatrix; //模型位置
		})

		//设置相机视角  上下调整
		viewer.camera.setView({
			destination: Cesium.Cartesian3.fromDegrees(paramObj.destination[0], paramObj.destination[1], paramObj.destination[2]),
			orientation: {       //设置视角
				heading: Cesium.Math.toRadians(paramObj.orientation.heading), // east, default value is 0.0 (north)左右摆头
				pitch: Cesium.Math.toRadians(paramObj.orientation.pitch),    // default value (looking down)上下抬头 -90俯视 0平视 90仰视(默认俯视)
				roll: paramObj.orientation.roll                          // default value
			}
		});

		//加载天际线
		var collection = viewer.scene.postProcessStages;
		var edgeDetection = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();

		var postProccessStage = new Cesium.PostProcessStage({
			//此后处理阶段的唯一名称,供组合中的其他阶段参考。如果未提供名称,将生成 GUID。
			name: paramObj.name,
			//fragmentShader 细绳 uniform着色器对象  textureScale
			fragmentShader: paramObj.fragmentShader,
		});

		//PostProcessStage:要使用的片段着色器。默认sampler2D制服是colorTexture和depthTexture。
		var postProccessStage1 = new Cesium.PostProcessStage({
			//name:此后处理阶段的唯一名称,供组合中的其他阶段参考。如果未提供名称,将生成 GUID。
			name: 'czm_skylinetemp1',
			//fragmentShader 细绳 uniform着色器对象  textureScale
			fragmentShader: 'uniform sampler2D colorTexture;' +
				'uniform sampler2D redTexture;' +
				'uniform sampler2D silhouetteTexture;' +
				'varying vec2 v_textureCoordinates;' +
				'void main(void)' +
				'{' +
				'vec4 redcolor=texture2D(redTexture, v_textureCoordinates);' +
				'vec4 silhouetteColor = texture2D(silhouetteTexture, v_textureCoordinates);' +
				'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
				'if(redcolor.r == 1.0){' +
				'gl_FragColor = mix(color, vec4(5.0,0.0,0.0,1.0), silhouetteColor.a);' +
				'}' +
				'else{' +
				'gl_FragColor = color;' +
				'}' +
				'}',
			//uniform着色器对象
			uniforms: {
				redTexture: postProccessStage.name,
				silhouetteTexture: edgeDetection.name
			}
		});
		// 如果inputPreviousStageTexture是true,则每个阶段的输入是场景渲染到的输出纹理或之前执行的阶段的输出纹理。
		// 如果inputPreviousStageTexture是false,则合成中每个阶段的输入纹理都是相同的。
		var postProccessStage = new Cesium.PostProcessStageComposite({
			//PostProcessStage要按顺序执行 的 s 或组合的数组。
			stages: [edgeDetection, postProccessStage, postProccessStage1],
			//是否执行每个后处理阶段,其中一个阶段的输入是前一个阶段的输出。
			//否则,每个包含阶段的输入是在组合之前执行的阶段的输出。
			inputPreviousStageTexture: false,
			//后处理阶段制服的别名。
			uniforms: edgeDetection.uniforms
		});
		collection.add(postProccessStage);
}

一顿操作之后,最终得到下面的结果
在这里插入图片描述

本文转自 https://blog.csdn.net/qq_44505797/article/details/122804374,如有侵权,请联系删除。

标签:分析,fragmentShader,天际线,uniform,var,Cesium,paramObj,name
来源: https://www.cnblogs.com/hustshu/p/15867476.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有