Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow ES6 template literals for new code? #10066

Closed
wants to merge 3 commits into from
Closed

Allow ES6 template literals for new code? #10066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b1e7789
Allow ES6 template literals
ptrgags Feb 2, 2022
f2eb600
Update ModelExperimental
ptrgags Feb 2, 2022
bac562b
Update sandcastles
ptrgags Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 98 additions & 101 deletions Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,72 +101,72 @@
const translucentWindowsShader = new Cesium.CustomShader({
lightingModel: Cesium.LightingModel.UNLIT,
isTranslucent: true,
fragmentShaderText: [
"const float WINDOW = 0.0;",
"const float SKYLIGHT = 4.0;",
"const float TOTAL_FEATURES = 12.0;",
"",
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
" float featureId = fsInput.featureIds.featureId_0;",
"",
" if (featureId == WINDOW || featureId == SKYLIGHT) {",
" material.alpha = 0.4;",
" material.roughness = 0.1;",
" }",
"}",
].join("\n"),
fragmentShaderText: `
const float WINDOW = 0.0;
const float SKYLIGHT = 4.0;
const float TOTAL_FEATURES = 12.0;

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
float featureId = fsInput.featureIds.featureId_0;

if (featureId == WINDOW || featureId == SKYLIGHT) {
material.alpha = 0.4;
material.roughness = 0.1;
}
}
`,
});

const materialShader = new Cesium.CustomShader({
lightingModel: Cesium.LightingModel.PBR,
isTranslucent: true,
fragmentShaderText: [
"const float WINDOW = 0.0;",
"const float FRAME = 1.0;",
"const float WALL = 2.0;",
"const float ROOF = 3.0;",
"const float SKYLIGHT = 4.0;",
"const float AIR_CONDITIONER_WHITE = 5.0;",
"const float AIR_CONDITIONER_BLACK = 6.0;",
"const float AIR_CONDITIONER_TALL = 7.0;",
"const float CLOCK = 8.0;",
"const float PILLARS = 9.0;",
"const float STREET_LIGHT = 10.0;",
"const float TRAFFIC_LIGHT = 11.0;",
"",
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
" float featureId = fsInput.featureIds.featureId_0;",
"",
" if (featureId == CLOCK) {",
" // Shiny brass",
" material.specular = vec3(0.98, 0.90, 0.59);",
" material.roughness = 0.3;",
" } else if (",
" featureId == STREET_LIGHT ||",
" featureId == AIR_CONDITIONER_BLACK ||",
" featureId == AIR_CONDITIONER_WHITE ||",
" featureId == AIR_CONDITIONER_TALL ||",
" featureId == ROOF",
" ) {",
" // dull aluminum",
" material.specular = vec3(0.91, 0.92, 0.92);",
" material.roughness = 0.5;",
" } else if (featureId == WINDOW || featureId == SKYLIGHT) {",
" // make translucent, but also set an orange emissive color so it looks like",
" // it's lit from inside",
" material.emissive = vec3(1.0, 0.3, 0.0);",
" material.alpha = 0.5;",
" } else if (featureId == WALL || featureId == FRAME || featureId == PILLARS) {",
" // paint the walls and pillars white to contrast the brass clock",
" material.diffuse = mix(material.diffuse, vec3(1.0), 0.8);",
" material.roughness = 0.9;",
" } else {",
" // brighten everything else",
" material.diffuse += 0.05;",
" material.roughness = 0.9;",
" }",
"}",
].join("\n"),
fragmentShaderText: `
const float WINDOW = 0.0;
const float FRAME = 1.0;
const float WALL = 2.0;
const float ROOF = 3.0;
const float SKYLIGHT = 4.0;
const float AIR_CONDITIONER_WHITE = 5.0;
const float AIR_CONDITIONER_BLACK = 6.0;
const float AIR_CONDITIONER_TALL = 7.0;
const float CLOCK = 8.0;
const float PILLARS = 9.0;
const float STREET_LIGHT = 10.0;
const float TRAFFIC_LIGHT = 11.0;

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
float featureId = fsInput.featureIds.featureId_0;

if (featureId == CLOCK) {
// Shiny brass
material.specular = vec3(0.98, 0.90, 0.59);
material.roughness = 0.3;
} else if (
featureId == STREET_LIGHT ||
featureId == AIR_CONDITIONER_BLACK ||
featureId == AIR_CONDITIONER_WHITE ||
featureId == AIR_CONDITIONER_TALL ||
featureId == ROOF
) {
// dull aluminum
material.specular = vec3(0.91, 0.92, 0.92);
material.roughness = 0.5;
} else if (featureId == WINDOW || featureId == SKYLIGHT) {
// make translucent, but also set an orange emissive color so it looks like
// it's lit from inside
material.emissive = vec3(1.0, 0.3, 0.0);
material.alpha = 0.5;
} else if (featureId == WALL || featureId == FRAME || featureId == PILLARS) {
// paint the walls and pillars white to contrast the brass clock
material.diffuse = mix(material.diffuse, vec3(1.0), 0.8);
material.roughness = 0.9;
} else {
// brighten everything else
material.diffuse += 0.05;
material.roughness = 0.9;
}
}
`,
});

const NOTHING_SELECTED = 12;
Expand All @@ -178,17 +178,17 @@
},
},
lightingModel: Cesium.LightingModel.PBR,
fragmentShaderText: [
"const float NOTHING_SELECTED = 12.0;",
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
" float featureId = fsInput.featureIds.featureId_0;",
"",
" if (u_selectedFeature < NOTHING_SELECTED && featureId == u_selectedFeature) {",
" material.specular = vec3(1.00, 0.85, 0.57);",
" material.roughness = 0.3;",
" }",
"}",
].join("\n"),
fragmentShaderText: `
const float NOTHING_SELECTED = 12.0;
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
float featureId = fsInput.featureIds.featureId_0;

if (u_selectedFeature < NOTHING_SELECTED && featureId == u_selectedFeature) {
material.specular = vec3(1.00, 0.85, 0.57);
material.roughness = 0.3;
}
}
`,
});

const multipleFeatureIdsShader = new Cesium.CustomShader({
Expand All @@ -199,30 +199,30 @@
},
},
lightingModel: Cesium.LightingModel.UNLIT,
fragmentShaderText: [
"const float IDS0_WINDOW = 0.0;",
"const float IDS1_FACADE = 2.0;",
"const float IDS1_ROOF = 3.0;",
"const vec3 PURPLE = vec3(0.5, 0.0, 1.0);",
"const vec3 YELLOW = vec3(1.0, 1.0, 0.0);",
"const vec3 NO_TINT = vec3(1.0);",
"",
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
" float featureId0 = fsInput.featureIds.featureId_0; // fine features",
" float featureId1 = fsInput.featureIds.featureId_1; // coarse features",
"",
" // use both feature ID sets to determine where the features are",
" float isWindow = float(featureId0 == IDS0_WINDOW);",
" float isFacade = float(featureId1 == IDS1_FACADE);",
" float isRoof = float(featureId1 == IDS1_ROOF);",
"",
" // Tint the roof windows yellow and facade windows purple",
" vec3 tint = NO_TINT;",
" tint = mix(tint, YELLOW, isWindow * isRoof);",
" tint = mix(tint, PURPLE, isWindow * isFacade);",
" material.diffuse *= tint;",
"}",
].join("\n"),
fragmentShaderText: `
const float IDS0_WINDOW = 0.0;
const float IDS1_FACADE = 2.0;
const float IDS1_ROOF = 3.0;
const vec3 PURPLE = vec3(0.5, 0.0, 1.0);
const vec3 YELLOW = vec3(1.0, 1.0, 0.0);
const vec3 NO_TINT = vec3(1.0);

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
float featureId0 = fsInput.featureIds.featureId_0; // fine features
float featureId1 = fsInput.featureIds.featureId_1; // coarse features

// use both feature ID sets to determine where the features are
float isWindow = float(featureId0 == IDS0_WINDOW);
float isFacade = float(featureId1 == IDS1_FACADE);
float isRoof = float(featureId1 == IDS1_ROOF);

// Tint the roof windows yellow and facade windows purple
vec3 tint = NO_TINT;
tint = mix(tint, YELLOW, isWindow * isRoof);
tint = mix(tint, PURPLE, isWindow * isFacade);
material.diffuse *= tint;
}
`,
});

// Demo Functions =====================================================================
Expand Down Expand Up @@ -295,11 +295,8 @@
nameOverlay.style.bottom =
viewer.canvas.clientHeight - movement.endPosition.y + "px";
nameOverlay.style.left = movement.endPosition.x + "px";
const message =
"Component: " +
pickedObject.getProperty("component") +
"\nFeature ID: " +
pickedObject.featureId;
const component = pickedObject.getProperty("component");
const message = `Component: ${component}\nFeature ID: ${pickedObject.featureId}`;
nameOverlay.textContent = message;
} else {
nameOverlay.style.display = "none";
Expand Down
32 changes: 16 additions & 16 deletions Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,22 +102,22 @@
value: 0,
},
},
fragmentShaderText: [
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)",
"{",
" float featureId = fsInput.featureIds.featureId_0;",
" // Use cartesian coordinates but scale to be roughly [-1, 1]",
" vec3 positionWC = fsInput.attributes.positionWC / 6.3e6;",
" if (featureId == 60.0)",
" {",
" // Something like FM synthesis to make irregularly spaced waves",
" float wave = sin(14.0 * positionWC.z - u_time);",
" wave = 0.5 + 0.5 * sin(10.0 * wave * positionWC.z - u_time);",
" // mix in an over-saturated version of the diffuse to make shimmering bands of color",
" material.diffuse = mix(material.diffuse, material.diffuse * 3.0, wave);",
" }",
"}",
].join("\n"),
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
{
float featureId = fsInput.featureIds.featureId_0;
// Use cartesian coordinates but scale to be roughly [-1, 1]
vec3 positionWC = fsInput.attributes.positionWC / 6.3e6;
if (featureId == 60.0)
{
// Something like FM synthesis to make irregularly spaced waves
float wave = sin(14.0 * positionWC.z - u_time);
wave = 0.5 + 0.5 * sin(10.0 * wave * positionWC.z - u_time);
// mix in an over-saturated version of the diffuse to make shimmering bands of color
material.diffuse = mix(material.diffuse, material.diffuse * 3.0, wave);
}
}
`,
});

const startTime = performance.now();
Expand Down
14 changes: 7 additions & 7 deletions Apps/Sandcastle/gallery/Custom Shaders 3D Tiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,14 @@
url: Cesium.IonResource.fromAssetId(75343),
customShader: new Cesium.CustomShader({
lightingModel: Cesium.LightingModel.UNLIT,
fragmentShaderText: [
fragmentShaderText: `
// Color tiles by distance to the camera
"void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)",
"{",
" material.diffuse = vec3(0.0, 0.0, 1.0);",
" material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e4;",
"}",
].join("\n"),
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
{
material.diffuse = vec3(0.0, 0.0, 1.0);
material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e4;
}
`,
}),
});
viewer.scene.primitives.add(tileset);
Expand Down
Loading