OpenSource
/
dc-sdk
ミラー元 https://github.com/dvt3d/dc-sdk
ウォッチ 4
スター 0
フォーク 0
コード 課題 0 リリース 92 Wiki アクティビティ
ソースを参照

update examples

tags/3.0.0
Caven Chen 2年前
親
703c2bfd6c
コミット
30970b0d65
6個のファイルの変更、258行の追加、9行の削除
分割表示 差分情報を表示
  1. 4
    4
      examples/effect/black_and_white.html
  2. 122
    0
      examples/effect/bounds_clip.html
  3. 14
    1
      examples/list.js
  4. 48
    0
      examples/terrain/ter_ch.html
  5. 63
    0
      examples/terrain/ter_exaggeration.html
  6. 7
    4
      gulpfile.js

+ 4
- 4
examples/effect/black_and_white.html ファイルの表示

@@ -24,9 +24,9 @@
crs:'WGS84'
})
viewer.addBaseLayer(baseLayer)
effect = new DC.Effect(viewer)
effect.blackAndWhite.enable= true
effect.blackAndWhite.gradations=4
effect = new DC.Effect(viewer)
effect.blackAndWhite.enable= true
effect.blackAndWhite.gradations=4
addGuiController() // add controller
}

@@ -43,7 +43,7 @@
effect.blackAndWhite.gradations=value
})
}
DC.ready({
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>

+ 122
- 0
examples/effect/bounds_clip.html ファイルの表示

@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dc-example</title>
<script src='/libs/dc-sdk/dc.min.js'></script>
<script src="../dat.gui.min.js"></script>
<link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
<link href='../index.css' type='text/css' rel='stylesheet'>
</head>

<body>

<div id="viewer-container" class="viewer-container" style=""></div>
<script>
let viewer = undefined
let effect = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container',{
orderIndependentTranslucency:false,
contextOptions:{
webgl:{
alpha:true
}
}
}).setOptions({
showMoon: false,
showSun: false,
skyBox: {
show:false
},
showAtmosphere:false,
globe: {
showGroundAtmosphere:false,
depthTestAgainstTerrain: true // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。
}
})
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer(baseLayer)

let Cesium = DC.getLib('Cesium')

const fs =`
uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
uniform vec3 centerWC;
uniform vec3 normalWC;
uniform float radius;
in vec2 v_textureCoordinates;
float getDepth(){
float z_window = czm_unpackDepth(texture(depthTexture, v_textureCoordinates));
z_window = czm_reverseLogDepth(z_window);
float n_range = czm_depthRange.near;
float f_range = czm_depthRange.far;
return (2.0 * z_window - n_range - f_range) / (f_range - n_range);
}

vec4 toEye(in vec2 uv, in float depth){
vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));
vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);
posInCamera = posInCamera / posInCamera.w;
return posInCamera;
}

vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){
vec3 v01 = point - planeOrigin;
float d = dot(planeNormal, v01) ;
return (point - planeNormal * d);
}

void main() {
float depth = getDepth();
vec4 color = texture(colorTexture, v_textureCoordinates);
vec4 viewPos = toEye(v_textureCoordinates, depth);
vec4 center = czm_view * vec4(centerWC,1);
vec4 planeNormal = czm_view * vec4(normalWC,0);
vec3 prjOnPlane = pointProjectOnPlane(planeNormal.xyz, center.xyz, viewPos.xyz);
float dis = length(prjOnPlane.xyz - center.xyz);
if(color.rgb !=vec3(0.0) && dis <= radius && depth < 1.0){
out_FragColor = vec4(color.rgb, 1.0);
}
}`;

let center = Cesium.Cartesian3.fromDegrees(120,31)
let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
center,
new Cesium.Cartesian3()
)

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
fragmentShader : fs,
uniforms : {
centerWC: function () {
return center
},
normalWC:function () {
return up
},
radius : function () {
return 10000
},
}
}));

addGuiController() // add controller
}

function addGuiController(){
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 14
- 1
examples/list.js ファイルの表示

@@ -182,7 +182,16 @@ const EXAMPLE_LIST = [
{
name: '地形设置',
folder: 'terrain',
children: [],
children: [
{
name: '地形（中国）',
page: 'ter_ch.html',
},
{
name: '地形（夸张）',
page: 'ter_exaggeration.html',
},
],
},
{
name: '要素图层',
@@ -564,6 +573,10 @@ const EXAMPLE_LIST = [
name: '雷达扫描',
page: 'radar_scan.html',
},
{
name: '区域切割',
page: 'bounds_clip.html',
},
{
name: '泛光',
page: 'bloom.html',

+ 48
- 0
examples/terrain/ter_ch.html ファイルの表示

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dc-example</title>
<script src='/libs/dc-sdk/dc.min.js'></script>
<link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
<link href='../index.css' type='text/css' rel='stylesheet'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer(baseLayer)
let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ,{
url: 'http://data.marsgis.cn/terrain'
})
viewer.addTerrain(terrain)
viewer.flyToPosition(
new DC.Position(
96.70456483909693,
28.883444927447762,
48977.26981733466,
0,
-31
)
)
}


DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 63
- 0
examples/terrain/ter_exaggeration.html ファイルの表示

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dc-example</title>
<script src='/libs/dc-sdk/dc.min.js'></script>
<script src="../dat.gui.min.js"></script>
<link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
<link href='../index.css' type='text/css' rel='stylesheet'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer(baseLayer)
let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ,{
url: 'http://data.marsgis.cn/terrain'
})
viewer.addTerrain(terrain)
viewer.flyToPosition(
new DC.Position(
96.70456483909693,
28.883444927447762,
48977.26981733466,
0,
-31
)
)
addGuiController() // add controller
}

function addGuiController(){
let controls = {
exaggeration:0,
}
let gui = new dat.GUI()
gui.add(controls,'exaggeration',0,10).step(1).onChange(value=>{
viewer.setOptions({
globe:{
terrainExaggeration: +value
}
})
})
}

DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
</html>

+ 7
- 4
gulpfile.js ファイルの表示

@@ -95,6 +95,8 @@ async function buildNamespace(options) {
file: options.node ? 'dist/namespace.cjs' : 'dist/namespace.js',
format: options.node ? 'cjs' : 'umd',
sourcemap: false,
banner: options.node ? '(function(){' : '',
footer: options.node ? '})()' : '',
})
}

@@ -154,9 +156,10 @@ async function buildModules(options) {
await fse.outputFile(
dcPath,
`
${content}
${exportVersion}
${exportCmdOut}
${exportVersion}
${exportCmdOut}
${content}

`,
{
encoding: 'utf8',
@@ -175,10 +178,10 @@ async function buildModules(options) {
await fse.outputFile(
dcPath,
`
${content}
${exportNamespace}
${exportVersion}
${exportCmdOut}
${content}
`,
{
encoding: 'utf8',

書き込み プレビュー
読み込み中…
キャンセル
保存