diff --git a/Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html b/Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html index ca0983be261b..e3c59eb9fd04 100644 --- a/Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html +++ b/Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html @@ -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; @@ -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({ @@ -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 ===================================================================== @@ -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"; diff --git a/Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html b/Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html index 01335805a8cf..1f789b89d7d6 100644 --- a/Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html +++ b/Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html @@ -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(); diff --git a/Apps/Sandcastle/gallery/Custom Shaders 3D Tiles.html b/Apps/Sandcastle/gallery/Custom Shaders 3D Tiles.html index 7f960de63335..3097fa9a92fd 100644 --- a/Apps/Sandcastle/gallery/Custom Shaders 3D Tiles.html +++ b/Apps/Sandcastle/gallery/Custom Shaders 3D Tiles.html @@ -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); diff --git a/Apps/Sandcastle/gallery/Custom Shaders Models.html b/Apps/Sandcastle/gallery/Custom Shaders Models.html index 051b6333c075..f4a602c9f137 100644 --- a/Apps/Sandcastle/gallery/Custom Shaders Models.html +++ b/Apps/Sandcastle/gallery/Custom Shaders Models.html @@ -75,14 +75,14 @@ value: new Cesium.Cartesian2(0.0, 0.0), }, }, - vertexShaderText: [ + vertexShaderText: ` // If the mouse is dragged to the right, the model grows // If the mouse is dragged to the left, the model shrinks - "void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput)", - "{", - " vsOutput.positionMC += 0.01 * u_drag.x * vsInput.attributes.normalMC;", - "}", - ].join("\n"), + void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) + { + vsOutput.positionMC += 0.01 * u_drag.x * vsInput.attributes.normalMC; + } + `, }); const textureUniformShader = new Cesium.CustomShader({ @@ -102,13 +102,13 @@ }, // Apply the texture to the model, but move the texture coordinates // a bit over time so it's animated. - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", - " vec2 texCoord = fsInput.attributes.texCoord_0 + 0.1 * vec2(u_time, 0.0);", - " material.diffuse = texture2D(u_stripes, texCoord).rgb;", - "}", - ].join("\n"), + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { + vec2 texCoord = fsInput.attributes.texCoord_0 + 0.1 * vec2(u_time, 0.0); + material.diffuse = texture2D(u_stripes, texCoord).rgb; + } + `, }); // make a checkerboard texture with an alpha that increases with the @@ -153,14 +153,14 @@ value: checkerboardTexture, }, }, - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", - " vec2 texCoord = fsInput.attributes.texCoord_0;", - " vec4 checkerboard = texture2D(u_checkerboard, texCoord);", - " material.diffuse = mix(material.diffuse, vec3(0.0), checkerboard.r);", - "}", - ].join("\n"), + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { + vec2 texCoord = fsInput.attributes.texCoord_0; + vec4 checkerboard = texture2D(u_checkerboard, texCoord); + material.diffuse = mix(material.diffuse, vec3(0.0), checkerboard.r); + } + `, }); // Color like a checkerboard but make the transparency vary with @@ -174,15 +174,15 @@ }, // necessary when setting material.alpha isTranslucent: true, - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", - " vec2 texCoord = fsInput.attributes.texCoord_0;", - " vec4 checkerboard = texture2D(u_checkerboard, texCoord);", - " material.diffuse = checkerboard.rgb;", - " material.alpha = checkerboard.a;", - "}", - ].join("\n"), + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { + vec2 texCoord = fsInput.attributes.texCoord_0; + vec4 checkerboard = texture2D(u_checkerboard, texCoord); + material.diffuse = checkerboard.rgb; + material.alpha = checkerboard.a; + } + `, }); // Use the checkerboard to cut holes in the model @@ -193,16 +193,16 @@ value: checkerboardTexture, }, }, - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", - " vec2 texCoord = fsInput.attributes.texCoord_0;", - " vec4 checkerboard = texture2D(u_checkerboard, texCoord);", - " if (checkerboard.r > 0.0) {", - " discard;", - " }", - "}", - ].join("\n"), + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { + vec2 texCoord = fsInput.attributes.texCoord_0; + vec4 checkerboard = texture2D(u_checkerboard, texCoord); + if (checkerboard.r > 0.0) { + discard; + } + } + `, }); // This example is to demonstrate the conventions used for orienting @@ -242,12 +242,12 @@ value: gradientTexture, }, }, - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", - " material.diffuse = texture2D(u_gradient, fsInput.attributes.texCoord_0).rgb;", - "}", - ].join("\n"), + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { + material.diffuse = texture2D(u_gradient, fsInput.attributes.texCoord_0).rgb; + } + `, }); // Dragging the mouse will modify the PBR values @@ -259,20 +259,20 @@ value: new Cesium.Cartesian2(0.0, 0.0), }, }, - fragmentShaderText: [ + fragmentShaderText: ` // Click and drag to vary the PBR values - "void fragmentMain(FragmentInput vsInput, inout czm_modelMaterial material)", - "{", - " float dragDistance = length(u_drag);", - " float variation = smoothstep(0.0, 300.0, dragDistance);", + void fragmentMain(FragmentInput vsInput, inout czm_modelMaterial material) + { + float dragDistance = length(u_drag); + float variation = smoothstep(0.0, 300.0, dragDistance); // variation adds an golden tint to the specular highlights - " material.specular = mix(material.specular, vec3(0.8, 0.5, 0.1), variation);", + material.specular = mix(material.specular, vec3(0.8, 0.5, 0.1), variation); // variation makes the material glossier - " material.roughness = clamp(1.0 - variation, 0.01, 1.0);", + material.roughness = clamp(1.0 - variation, 0.01, 1.0); // variation mixes some red into the diffuse color - " material.diffuse += vec3(0.5, 0.0, 0.0) * variation;", - "}", - ].join("\n"), + material.diffuse += vec3(0.5, 0.0, 0.0) * variation; + } + `, }); const pointCloudWaveShader = new Cesium.CustomShader({ @@ -283,40 +283,40 @@ value: 0, }, }, - vertexShaderText: [ - "void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput)", - "{", + vertexShaderText: ` + void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) + { // This model's x and y coordinates are in the range [0, 1], which // conveniently doubles as UV coordinates. - " vec2 uv = vsInput.attributes.positionMC.xy;", + vec2 uv = vsInput.attributes.positionMC.xy; // Make the point cloud undulate in a complex wave that varies in // both space and time. The amplitude is based on the original shape // of the point cloud (which already is a wavy surface). The wave // is computed relative to the center of the model, hence the // transformations from [0, 1] -> [-1, 1] -> [0, 1] - " float amplitude = 2.0 * vsInput.attributes.positionMC.z - 1.0;", - " float wave = amplitude * sin(2.0 * czm_pi * uv.x - 2.0 * u_time) * sin(u_time);", - " vsOutput.positionMC.z = 0.5 + 0.5 * wave;", + float amplitude = 2.0 * vsInput.attributes.positionMC.z - 1.0; + float wave = amplitude * sin(2.0 * czm_pi * uv.x - 2.0 * u_time) * sin(u_time); + vsOutput.positionMC.z = 0.5 + 0.5 * wave; // Make the points pulse in and out by changing their size - " vsOutput.pointSize = 10.0 + 5.0 * sin(u_time);", - "}", - ].join("\n"), - fragmentShaderText: [ - "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)", - "{", + vsOutput.pointSize = 10.0 + 5.0 * sin(u_time); + } + `, + fragmentShaderText: ` + void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) + { // Make the points circular instead of square - " float distance = length(gl_PointCoord - 0.5);", - " if (distance > 0.5) {", - " discard;", - " }", + float distance = length(gl_PointCoord - 0.5); + if (distance > 0.5) { + discard; + } // Make a sinusoid color palette that moves in the general direction // of the wave, but at a different speed. // Coefficients were chosen arbitrarily - " vec2 uv = fsInput.attributes.positionMC.xy;", - " material.diffuse = 0.2 * fsInput.attributes.color_0.rgb;", - " material.diffuse += vec3(0.2, 0.3, 0.4) + vec3(0.2, 0.3, 0.4) * sin(2.0 * czm_pi * vec3(3.0, 2.0, 1.0) * uv.x - 3.0 * u_time);", - "}", - ].join("\n"), + vec2 uv = fsInput.attributes.positionMC.xy; + material.diffuse = 0.2 * fsInput.attributes.color_0.rgb; + material.diffuse += vec3(0.2, 0.3, 0.4) + vec3(0.2, 0.3, 0.4) * sin(2.0 * czm_pi * vec3(3.0, 2.0, 1.0) * uv.x - 3.0 * u_time); + } + `, }); // Demos ============================================================== diff --git a/Source/.eslintrc.json b/Source/.eslintrc.json index b6d66e8a7f4b..964e6980c787 100644 --- a/Source/.eslintrc.json +++ b/Source/.eslintrc.json @@ -13,6 +13,7 @@ "no-unused-vars": ["error", {"vars": "all", "args": "none"}], "es/no-modules": "off", "es/no-typed-arrays": "off", - "es/no-block-scoped-variables": "off" + "es/no-block-scoped-variables": "off", + "es/no-template-literals": "off" } } diff --git a/Source/Renderer/ShaderBuilder.js b/Source/Renderer/ShaderBuilder.js index d33f03e79df4..bdc6da111034 100644 --- a/Source/Renderer/ShaderBuilder.js +++ b/Source/Renderer/ShaderBuilder.js @@ -127,7 +127,7 @@ ShaderBuilder.prototype.addDefine = function (identifier, value, destination) { // The ShaderSource created in build() will add the #define part let line = identifier; if (defined(value)) { - line += " " + value.toString(); + line += ` ${value.toString()}`; } if (ShaderDestination.includesVertexShader(destination)) { @@ -278,7 +278,7 @@ ShaderBuilder.prototype.addUniform = function (type, identifier, destination) { //>>includeEnd('debug'); destination = defaultValue(destination, ShaderDestination.BOTH); - const line = "uniform " + type + " " + identifier + ";"; + const line = `uniform ${type} ${identifier};`; if (ShaderDestination.includesVertexShader(destination)) { this._vertexShaderParts.uniformLines.push(line); @@ -318,7 +318,7 @@ ShaderBuilder.prototype.setPositionAttribute = function (type, identifier) { } //>>includeEnd('debug'); - this._positionAttributeLine = "attribute " + type + " " + identifier + ";"; + this._positionAttributeLine = `attribute ${type} ${identifier};`; // Some WebGL implementations require attribute 0 to always be active, so // this builder assumes the position will always go in location 0 @@ -348,7 +348,7 @@ ShaderBuilder.prototype.addAttribute = function (type, identifier) { Check.typeOf.string("identifier", identifier); //>>includeEnd('debug'); - const line = "attribute " + type + " " + identifier + ";"; + const line = `attribute ${type} ${identifier};`; this._attributeLines.push(line); const location = this._nextAttributeLocation; @@ -373,7 +373,7 @@ ShaderBuilder.prototype.addVarying = function (type, identifier) { Check.typeOf.string("identifier", identifier); //>>includeEnd('debug'); - const line = "varying " + type + " " + identifier + ";"; + const line = `varying ${type} ${identifier};`; this._vertexShaderParts.varyingLines.push(line); this._fragmentShaderParts.varyingLines.push(line); }; diff --git a/Source/Scene/ModelExperimental/CustomShader.js b/Source/Scene/ModelExperimental/CustomShader.js index 48c3d499d24d..eabcd3f83e66 100644 --- a/Source/Scene/ModelExperimental/CustomShader.js +++ b/Source/Scene/ModelExperimental/CustomShader.js @@ -319,15 +319,15 @@ function expandCoordinateAbbreviations(variableName) { const eyeCoordinatesRegex = /^.*EC$/; if (modelCoordinatesRegex.test(variableName)) { - return variableName + " (model coordinates)"; + return `${variableName} (model coordinates)`; } if (worldCoordinatesRegex.test(variableName)) { - return variableName + " (Cartesian world coordinates)"; + return `${variableName} (Cartesian world coordinates)`; } if (eyeCoordinatesRegex.test(variableName)) { - return variableName + " (eye coordinates)"; + return `${variableName} (eye coordinates)`; } return variableName; @@ -340,13 +340,10 @@ function validateVariableUsage( vertexOrFragment ) { if (variableSet.hasOwnProperty(incorrectVariable)) { - const message = - expandCoordinateAbbreviations(incorrectVariable) + - " is not available in the " + - vertexOrFragment + - " shader. Did you mean " + - expandCoordinateAbbreviations(correctVariable) + - " instead?"; + const incorrectExpanded = expandCoordinateAbbreviations(incorrectVariable); + const correctExpanded = expandCoordinateAbbreviations(correctVariable); + + const message = `${incorrectExpanded} is not available in the ${vertexOrFragment} shader. Did you mean ${correctExpanded} instead?`; throw new DeveloperError(message); } } @@ -395,9 +392,7 @@ CustomShader.prototype.setUniform = function (uniformName, value) { Check.defined("value", value); if (!defined(this.uniforms[uniformName])) { throw new DeveloperError( - "Uniform " + - uniformName + - " must be declared in the CustomShader constructor." + `Uniform ${uniformName} must be declared in the CustomShader constructor.` ); } //>>includeEnd('debug'); diff --git a/Source/Scene/ModelExperimental/CustomShaderMode.js b/Source/Scene/ModelExperimental/CustomShaderMode.js index 1264e6dbd0be..06ce352d1469 100644 --- a/Source/Scene/ModelExperimental/CustomShaderMode.js +++ b/Source/Scene/ModelExperimental/CustomShaderMode.js @@ -34,7 +34,7 @@ const CustomShaderMode = { * @private */ CustomShaderMode.getDefineName = function (customShaderMode) { - return "CUSTOM_SHADER_" + customShaderMode; + return `CUSTOM_SHADER_${customShaderMode}`; }; export default Object.freeze(CustomShaderMode); diff --git a/Source/Scene/ModelExperimental/CustomShaderPipelineStage.js b/Source/Scene/ModelExperimental/CustomShaderPipelineStage.js index 6e8b84d579c7..93c9d28b1098 100644 --- a/Source/Scene/ModelExperimental/CustomShaderPipelineStage.js +++ b/Source/Scene/ModelExperimental/CustomShaderPipelineStage.js @@ -235,12 +235,7 @@ function generateVertexShaderLines( // Initializing attribute structs are just a matter of copying the // attribute or varying: E.g.: // " vsInput.attributes.position = a_position;" - vertexInitialization = - "vsInput.attributes." + - variableName + - " = attributes." + - variableName + - ";"; + vertexInitialization = `vsInput.attributes.${variableName} = attributes.${variableName};`; initializationLines.push(vertexInitialization); } } @@ -251,9 +246,7 @@ function generateVertexShaderLines( if (!defined(attributeDefaults)) { CustomShaderPipelineStage._oneTimeWarning( "CustomShaderPipelineStage.incompatiblePrimitiveVS", - "Primitive is missing attribute " + - variableName + - ", disabling custom vertex shader" + `Primitive is missing attribute ${variableName}, disabling custom vertex shader` ); // This primitive isn't compatible with the shader. Return early // to skip the vertex shader @@ -261,12 +254,7 @@ function generateVertexShaderLines( } attributeFields.push(attributeDefaults.attributeField); - vertexInitialization = - "vsInput.attributes." + - variableName + - " = " + - attributeDefaults.value + - ";"; + vertexInitialization = `vsInput.attributes.${variableName} = ${attributeDefaults.value};`; initializationLines.push(vertexInitialization); } @@ -333,12 +321,7 @@ function generateFragmentShaderLines( // Initializing attribute structs are just a matter of copying the // value from the processed attributes // " fsInput.attributes.positionMC = attributes.positionMC;" - fragmentInitialization = - "fsInput.attributes." + - variableName + - " = attributes." + - variableName + - ";"; + fragmentInitialization = `fsInput.attributes.${variableName} = attributes.${variableName};`; initializationLines.push(fragmentInitialization); } } @@ -349,9 +332,7 @@ function generateFragmentShaderLines( if (!defined(attributeDefaults)) { CustomShaderPipelineStage._oneTimeWarning( "CustomShaderPipelineStage.incompatiblePrimitiveFS", - "Primitive is missing attribute " + - variableName + - ", disabling custom fragment shader." + `Primitive is missing attribute ${variableName}, disabling custom fragment shader.` ); // This primitive isn't compatible with the shader. Return early @@ -360,12 +341,7 @@ function generateFragmentShaderLines( } attributeFields.push(attributeDefaults.attributeField); - fragmentInitialization = - "fsInput.attributes." + - variableName + - " = " + - attributeDefaults.value + - ";"; + fragmentInitialization = `fsInput.attributes.${variableName} = ${attributeDefaults.value};`; initializationLines.push(fragmentInitialization); } diff --git a/Source/Scene/ModelExperimental/DequantizationPipelineStage.js b/Source/Scene/ModelExperimental/DequantizationPipelineStage.js index 56649bd57d49..8e41b49783d0 100644 --- a/Source/Scene/ModelExperimental/DequantizationPipelineStage.js +++ b/Source/Scene/ModelExperimental/DequantizationPipelineStage.js @@ -67,7 +67,7 @@ function addDequantizationUniforms(renderResources, attributeInfo) { const quantization = attributeInfo.attribute.quantization; if (quantization.octEncoded) { - const normalizationRange = "model_normalizationRange_" + variableName; + const normalizationRange = `model_normalizationRange_${variableName}`; shaderBuilder.addUniform( "float", normalizationRange, @@ -77,8 +77,8 @@ function addDequantizationUniforms(renderResources, attributeInfo) { return quantization.normalizationRange; }; } else { - const offset = "model_quantizedVolumeOffset_" + variableName; - const stepSize = "model_quantizedVolumeStepSize_" + variableName; + const offset = `model_quantizedVolumeOffset_${variableName}`; + const stepSize = `model_quantizedVolumeStepSize_${variableName}`; const glslType = attributeInfo.glslType; shaderBuilder.addUniform(glslType, offset, ShaderDestination.VERTEX); shaderBuilder.addUniform(glslType, stepSize, ShaderDestination.VERTEX); @@ -131,10 +131,10 @@ function updateDequantizationFunction(shaderBuilder, attributeInfo) { } function generateOctDecodeLine(variableName, quantization) { - const structField = "attributes." + variableName; + const structField = `attributes.${variableName}`; - const quantizedAttribute = "a_quantized_" + variableName; - const normalizationRange = "model_normalizationRange_" + variableName; + const quantizedAttribute = `a_quantized_${variableName}`; + const normalizationRange = `model_normalizationRange_${variableName}`; // Draco stores things as .zxy instead of xyz, so be explicit about the // swizzle to avoid confusion @@ -142,36 +142,18 @@ function generateOctDecodeLine(variableName, quantization) { // This generates lines such as: // attributes.normal = czm_octDecode(a_quantized_normal, model_normalizationRange_normal).zxy; - return ( - structField + - " = czm_octDecode(" + - quantizedAttribute + - ", " + - normalizationRange + - ")" + - swizzle + - ";" - ); + return `${structField} = czm_octDecode(${quantizedAttribute}, ${normalizationRange})${swizzle};`; } function generateDequantizeLine(variableName) { - const structField = "attributes." + variableName; - const quantizedAttribute = "a_quantized_" + variableName; - const offset = "model_quantizedVolumeOffset_" + variableName; - const stepSize = "model_quantizedVolumeStepSize_" + variableName; + const structField = `attributes.${variableName}`; + const quantizedAttribute = `a_quantized_${variableName}`; + const offset = `model_quantizedVolumeOffset_${variableName}`; + const stepSize = `model_quantizedVolumeStepSize_${variableName}`; // This generates lines such as: // attributes.texCoord_0 = model_quantizedVolumeOffset_texCoord_0 + a_quantized_texCoord_0 * model_quantizedVolumeStepSize; - return ( - structField + - " = " + - offset + - " + " + - quantizedAttribute + - " * " + - stepSize + - ";" - ); + return `${structField} = ${offset} + ${quantizedAttribute} * ${stepSize};`; } export default DequantizationPipelineStage; diff --git a/Source/Scene/ModelExperimental/FeatureIdPipelineStage.js b/Source/Scene/ModelExperimental/FeatureIdPipelineStage.js index 2a46ba63c75f..c7a7fa57e740 100644 --- a/Source/Scene/ModelExperimental/FeatureIdPipelineStage.js +++ b/Source/Scene/ModelExperimental/FeatureIdPipelineStage.js @@ -108,7 +108,7 @@ function processInstanceFeatureIds(renderResources, instances, frameState) { for (let i = 0; i < featureIdsArray.length; i++) { const featureIds = featureIdsArray[i]; - const variableName = "instanceFeatureId_" + i; + const variableName = `instanceFeatureId_${i}`; if (featureIds instanceof ModelComponents.FeatureIdAttribute) { processInstanceAttribute(renderResources, featureIds, variableName); @@ -136,7 +136,7 @@ function processPrimitiveFeatureIds(renderResources, primitive, frameState) { for (let i = 0; i < featureIdsArray.length; i++) { const featureIds = featureIdsArray[i]; - const variableName = "featureId_" + i; + const variableName = `featureId_${i}`; if (featureIds instanceof ModelComponents.FeatureIdAttribute) { processAttribute(renderResources, featureIds, variableName); } else if (featureIds instanceof ModelComponents.FeatureIdImplicitRange) { @@ -183,10 +183,10 @@ function processInstanceAttribute( const setIndex = featureIdAttribute.setIndex; const prefix = variableName.replace(/_\d+$/, "_"); - const attributeName = "a_" + prefix + setIndex; - const varyingName = "v_" + prefix + setIndex; - const vertexLine = "featureIds." + variableName + " = " + attributeName + ";"; - const fragmentLine = "featureIds." + variableName + " = " + varyingName + ";"; + const attributeName = `a_${prefix}${setIndex}`; + const varyingName = `v_${prefix}${setIndex}`; + const vertexLine = `featureIds.${variableName} = ${attributeName};`; + const fragmentLine = `featureIds.${variableName} = ${varyingName};`; shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_INITIALIZE_FEATURE_IDS_VS, @@ -205,7 +205,7 @@ function processInstanceAttribute( // v_instanceFeatureId_n = a_instanceFeatureId_n; shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_SET_FEATURE_ID_VARYINGS, - [varyingName + " = " + attributeName + ";"] + [`${varyingName} = ${attributeName};`] ); } @@ -237,7 +237,7 @@ function processAttribute(renderResources, featureIdAttribute, variableName) { const prefix = variableName.replace(/_\d+$/, "_"); const initializationLines = [ - "featureIds." + variableName + " = attributes." + prefix + setIndex + ";", + `featureIds.${variableName} = attributes.${prefix}${setIndex};`, ]; shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_INITIALIZE_FEATURE_IDS_VS, @@ -270,12 +270,12 @@ function processImplicitRange( // Declare the vertex attribute in the shader // Example: attribute float a_implicit_feature_id_n; const shaderBuilder = renderResources.shaderBuilder; - const implicitAttributeName = "a_implicit_" + variableName; + const implicitAttributeName = `a_implicit_${variableName}`; shaderBuilder.addAttribute("float", implicitAttributeName); // Also declare the corresponding varyings // Example: varying float v_implicit_feature_id_n; - const implicitVaryingName = "v_implicit_" + variableName; + const implicitVaryingName = `v_implicit_${variableName}`; shaderBuilder.addVarying("float", implicitVaryingName); // Add a field to the FeatureIds struct. @@ -301,7 +301,7 @@ function processImplicitRange( // v_implicit_featureId_n = a_implicit_featureId_n; shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_SET_FEATURE_ID_VARYINGS, - [implicitVaryingName + " = " + implicitAttributeName + ";"] + [`${implicitVaryingName} = ${implicitAttributeName};`] ); // Initialize the field from the generated attribute/varying. @@ -310,11 +310,11 @@ function processImplicitRange( // featureIds.featureId_n = v_implicit_featureId_n; (FS) shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_INITIALIZE_FEATURE_IDS_VS, - ["featureIds." + variableName + " = " + implicitAttributeName + ";"] + [`featureIds.${variableName} = ${implicitAttributeName};`] ); shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_INITIALIZE_FEATURE_IDS_FS, - ["featureIds." + variableName + " = " + implicitVaryingName + ";"] + [`featureIds.${variableName} = ${implicitVaryingName};`] ); } @@ -327,7 +327,7 @@ function processTexture( ) { // Create the feature ID texture uniform. The index matches the index from // the featureIds array, even if this is not consecutive. - const uniformName = "u_featureIdTexture_" + index; + const uniformName = `u_featureIdTexture_${index}`; const uniformMap = renderResources.uniformMap; const textureReader = featureIdTexture.textureReader; uniformMap[uniformName] = function () { @@ -362,16 +362,15 @@ function processTexture( // Example: // featureIds.featureId_n = floor(texture2D(u_featureIdTexture_m, attributes.texCoord_p).r * 255.0 + 0.5); - const texCoord = "v_texCoord_" + textureReader.texCoord; + const texCoord = `v_texCoord_${textureReader.texCoord}`; // The current EXT_mesh_features spec requires a single channel. const channel = textureReader.channels; - const textureRead = - "texture2D(" + uniformName + ", " + texCoord + ")." + channel; - const rounded = "floor(" + textureRead + " * 255.0 + 0.5)"; + const textureRead = `texture2D(${uniformName}, ${texCoord}).${channel}`; + const rounded = `floor(${textureRead} * 255.0 + 0.5)`; shaderBuilder.addFunctionLines( FeatureIdPipelineStage.FUNCTION_ID_INITIALIZE_FEATURE_IDS_FS, - ["featureIds." + variableName + " = " + rounded + ";"] + [`featureIds.${variableName} = ${rounded};`] ); } diff --git a/Source/Scene/ModelExperimental/GeometryPipelineStage.js b/Source/Scene/ModelExperimental/GeometryPipelineStage.js index 17abbfa8aee0..8d6164c68b5f 100644 --- a/Source/Scene/ModelExperimental/GeometryPipelineStage.js +++ b/Source/Scene/ModelExperimental/GeometryPipelineStage.js @@ -175,7 +175,7 @@ function addSemanticDefine(shaderBuilder, attribute) { case VertexAttributeSemantic.FEATURE_ID: case VertexAttributeSemantic.TEXCOORD: case VertexAttributeSemantic.COLOR: - shaderBuilder.addDefine("HAS_" + semantic + "_" + setIndex); + shaderBuilder.addDefine(`HAS_${semantic}_${setIndex}`); } } @@ -220,7 +220,7 @@ function addAttributeToRenderResources( function addVaryingDeclaration(shaderBuilder, attributeInfo) { const variableName = attributeInfo.variableName; - let varyingName = "v_" + variableName; + let varyingName = `v_${variableName}`; let glslType; if (variableName === "normalMC") { @@ -248,10 +248,10 @@ function addAttributeDeclaration(shaderBuilder, attributeInfo) { let attributeName; let glslType; if (attributeInfo.isQuantized) { - attributeName = "a_quantized_" + variableName; + attributeName = `a_quantized_${variableName}`; glslType = attributeInfo.quantizedGlslType; } else { - attributeName = "a_" + variableName; + attributeName = `a_${variableName}`; glslType = attributeInfo.glslType; } @@ -304,7 +304,7 @@ function updateInitialzeAttributesFunction(shaderBuilder, attributeInfo) { if (variableName === "tangentMC") { line = "attributes.tangentMC = a_tangentMC.xyz;"; } else { - line = "attributes." + variableName + " = a_" + variableName + ";"; + line = `attributes.${variableName} = a_${variableName};`; } shaderBuilder.addFunctionLines(functionId, [line]); } @@ -322,13 +322,13 @@ function updateSetDynamicVaryingsFunction(shaderBuilder, attributeInfo) { // v_texCoord_1 = attributes.texCoord_1; let functionId = GeometryPipelineStage.FUNCTION_ID_SET_DYNAMIC_VARYINGS_VS; const variableName = attributeInfo.variableName; - let line = "v_" + variableName + " = attributes." + variableName + ";"; + let line = `v_${variableName} = attributes.${variableName};`; shaderBuilder.addFunctionLines(functionId, [line]); // In the fragment shader, we do the opposite: // attributes.texCoord_1 = v_texCoord_1; functionId = GeometryPipelineStage.FUNCTION_ID_SET_DYNAMIC_VARYINGS_FS; - line = "attributes." + variableName + " = v_" + variableName + ";"; + line = `attributes.${variableName} = v_${variableName};`; shaderBuilder.addFunctionLines(functionId, [line]); } diff --git a/Source/Scene/ModelExperimental/InstancingPipelineStage.js b/Source/Scene/ModelExperimental/InstancingPipelineStage.js index dd4e1bcd21d1..1b47b1475b26 100644 --- a/Source/Scene/ModelExperimental/InstancingPipelineStage.js +++ b/Source/Scene/ModelExperimental/InstancingPipelineStage.js @@ -328,7 +328,7 @@ function processFeatureIdAttributes( shaderBuilder.addAttribute( "float", - "a_instanceFeatureId_" + attribute.setIndex + `a_instanceFeatureId_${attribute.setIndex}` ); } } diff --git a/Source/Scene/ModelExperimental/MaterialPipelineStage.js b/Source/Scene/ModelExperimental/MaterialPipelineStage.js index bba5a579f456..870419e9401e 100644 --- a/Source/Scene/ModelExperimental/MaterialPipelineStage.js +++ b/Source/Scene/ModelExperimental/MaterialPipelineStage.js @@ -129,7 +129,7 @@ function processTextureTransform( defineName ) { // Add a define to enable the texture transformation code in the shader. - const transformDefine = "HAS_" + defineName + "_TEXTURE_TRANSFORM"; + const transformDefine = `HAS_${defineName}_TEXTURE_TRANSFORM`; shaderBuilder.addDefine( transformDefine, undefined, @@ -137,7 +137,7 @@ function processTextureTransform( ); // Add a uniform for the transformation matrix - const transformUniformName = uniformName + "Transform"; + const transformUniformName = `${uniformName}Transform`; shaderBuilder.addUniform( "mat3", transformUniformName, @@ -178,13 +178,13 @@ function processTexture( }; // Add a #define directive to enable using the texture in the shader - const textureDefine = "HAS_" + defineName + "_TEXTURE"; + const textureDefine = `HAS_${defineName}_TEXTURE`; shaderBuilder.addDefine(textureDefine, undefined, ShaderDestination.FRAGMENT); // Add a #define to tell the shader which texture coordinates varying to use. const texCoordIndex = textureReader.texCoord; - const texCoordVarying = "v_texCoord_" + texCoordIndex; - const texCoordDefine = "TEXCOORD_" + defineName; + const texCoordVarying = `v_texCoord_${texCoordIndex}`; + const texCoordDefine = `TEXCOORD_${defineName}`; shaderBuilder.addDefine( texCoordDefine, texCoordVarying, diff --git a/Source/Scene/ModelExperimental/ModelExperimentalUtility.js b/Source/Scene/ModelExperimental/ModelExperimentalUtility.js index 5fedb2aee0ee..dec0fd0a5204 100644 --- a/Source/Scene/ModelExperimental/ModelExperimentalUtility.js +++ b/Source/Scene/ModelExperimental/ModelExperimentalUtility.js @@ -27,9 +27,9 @@ export default function ModelExperimentalUtility() {} */ ModelExperimentalUtility.getFailedLoadFunction = function (model, type, path) { return function (error) { - let message = "Failed to load " + type + ": " + path; + let message = `Failed to load ${type}: ${path}`; if (defined(error)) { - message += "\n" + error.message; + message += `\n${error.message}`; } model._readyPromise.reject(new RuntimeError(message)); }; diff --git a/Source/Scene/ModelExperimental/ModelFeature.js b/Source/Scene/ModelExperimental/ModelFeature.js index ef45b21ed8ed..ea31e980bd5e 100644 --- a/Source/Scene/ModelExperimental/ModelFeature.js +++ b/Source/Scene/ModelExperimental/ModelFeature.js @@ -158,7 +158,7 @@ ModelFeature.prototype.hasProperty = function (name) { * const length = propertyNames.length; * for (let i = 0; i < length; ++i) { * const propertyName = propertyNames[i]; - * console.log(propertyName + ': ' + feature.getProperty(propertyName)); + * console.log(`${propertyName}: ${feature.getProperty(propertyName)}`); * } */ ModelFeature.prototype.getProperty = function (name) { diff --git a/Source/Scene/ModelExperimental/SelectedFeatureIdPipelineStage.js b/Source/Scene/ModelExperimental/SelectedFeatureIdPipelineStage.js index a8f296d46ccf..caebfb4e1567 100644 --- a/Source/Scene/ModelExperimental/SelectedFeatureIdPipelineStage.js +++ b/Source/Scene/ModelExperimental/SelectedFeatureIdPipelineStage.js @@ -104,7 +104,7 @@ function getSelectedFeatureIds(model, node, primitive) { featureIds = node.instances.featureIds[model.instanceFeatureIdIndex]; if (defined(featureIds)) { - variableName = "instanceFeatureId_" + model.instanceFeatureIdIndex; + variableName = `instanceFeatureId_${model.instanceFeatureIdIndex}`; return { featureIds: featureIds, variableName: variableName, @@ -115,7 +115,7 @@ function getSelectedFeatureIds(model, node, primitive) { } featureIds = primitive.featureIds[model.featureIdIndex]; - variableName = "featureId_" + model.featureIdIndex; + variableName = `featureId_${model.featureIdIndex}`; return { featureIds: featureIds, variableName: variableName,