|
| 1 | +<!doctype html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | + <meta |
| 7 | + name="viewport" |
| 8 | + content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" |
| 9 | + /> |
| 10 | + <meta |
| 11 | + name="description" |
| 12 | + content="Browse Cesium's built in materials and define new ones using the Fabric schema." |
| 13 | + /> |
| 14 | + <meta name="cesium-sandcastle-labels" content="Showcases" /> |
| 15 | + <title>Material with Custom GLSL</title> |
| 16 | + <script type="text/javascript" src="../Sandcastle-header.js"></script> |
| 17 | + <script |
| 18 | + type="text/javascript" |
| 19 | + src="../../../Build/CesiumUnminified/Cesium.js" |
| 20 | + nomodule |
| 21 | + ></script> |
| 22 | + <script type="module" src="../load-cesium-es6.js"></script> |
| 23 | + </head> |
| 24 | + |
| 25 | + <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"> |
| 26 | + <style> |
| 27 | + @import url(../templates/bucket.css); |
| 28 | + </style> |
| 29 | + <div id="cesiumContainer" class="fullSize"></div> |
| 30 | + <div id="loadingOverlay"> |
| 31 | + <h1>Loading...</h1> |
| 32 | + </div> |
| 33 | + <div id="toolbar"></div> |
| 34 | + <script id="cesium_sandcastle_script"> |
| 35 | + window.startup = async function (Cesium) { |
| 36 | + "use strict"; |
| 37 | + //Sandcastle_Begin |
| 38 | + |
| 39 | + const boxSize = 25; |
| 40 | + |
| 41 | + // Create a Material Appearance using custom shader code. |
| 42 | + function createMaterialAppearance() { |
| 43 | + // Create custom materials. |
| 44 | + const customMaterial = new Cesium.Material({ |
| 45 | + translucent: false, |
| 46 | + fabric: { |
| 47 | + type: "CustomBoxShader", |
| 48 | + // NOTE: Uniforms in the Material fabric can only be used directly in the fabric shader source. |
| 49 | + // In the final shader code, the variable name will be overwritten. |
| 50 | + uniforms: { |
| 51 | + time: 0.0, |
| 52 | + }, |
| 53 | + source: ` |
| 54 | + // Uniform variables added by the fabric need to be explicitly declared. |
| 55 | + uniform float time; |
| 56 | +
|
| 57 | + // Define a function to return the value of the fabric uniform. |
| 58 | + // This makes it accessible in the final shader code, where the modified uniform name is unknown. |
| 59 | + float getUniformTimeOfMaterial(){ |
| 60 | + return time; |
| 61 | + } |
| 62 | +
|
| 63 | + czm_material czm_getMaterial(czm_materialInput materialInput) { |
| 64 | + czm_material material = czm_getDefaultMaterial(materialInput); |
| 65 | + |
| 66 | + // Within the Material fabric source, you can directly use the uniform names as declared. |
| 67 | + // material.alpha = 0.33 + (sin(time * 0.03) + 1.0) / 3.0; |
| 68 | + |
| 69 | + return material; |
| 70 | + } |
| 71 | + `, |
| 72 | + }, |
| 73 | + }); |
| 74 | + |
| 75 | + const appearance = new Cesium.MaterialAppearance({ |
| 76 | + material: customMaterial, |
| 77 | + flat: false, |
| 78 | + faceForward: true, |
| 79 | + translucent: true, |
| 80 | + closed: true, |
| 81 | + vertexShaderSource: ` |
| 82 | + in vec3 position3DHigh; |
| 83 | + in vec3 position3DLow; |
| 84 | + in vec3 normal; |
| 85 | + in vec2 st; |
| 86 | + in float batchId; |
| 87 | +
|
| 88 | + out vec3 v_positionEC; |
| 89 | + out vec3 v_normalEC; |
| 90 | + out vec2 v_st; |
| 91 | + out vec3 v_position; |
| 92 | +
|
| 93 | + // The variables passed by appearance.uniforms need to be explicitly declared. |
| 94 | + uniform float frameNumber; |
| 95 | +
|
| 96 | + mat3 rotateZ(float angle) { |
| 97 | + float c = cos(angle); |
| 98 | + float s = sin(angle); |
| 99 | + return mat3( |
| 100 | + c, -s, 0.0, |
| 101 | + s, c, 0.0, |
| 102 | + 0.0, 0.0, 1.0 |
| 103 | + ); |
| 104 | + } |
| 105 | +
|
| 106 | + void main() |
| 107 | + { |
| 108 | + vec4 p = czm_computePosition(); |
| 109 | + // Get the origin Model Coordinates (MC) from the position. This will lose some precision. |
| 110 | + vec3 cameraPositionMC = czm_encodedCameraPositionMCHigh + czm_encodedCameraPositionMCLow; |
| 111 | + vec3 originMC = p.xyz + cameraPositionMC; |
| 112 | +
|
| 113 | + // Use uniform frameNumber from Appearance to rotate the box. |
| 114 | + mat3 rotation = rotateZ(frameNumber * 0.01); |
| 115 | + originMC = rotation * originMC; |
| 116 | +
|
| 117 | + v_position = originMC; |
| 118 | +
|
| 119 | + // Restore to coordinates relative to the camera. |
| 120 | + originMC = originMC - cameraPositionMC; |
| 121 | + p.xyz = originMC; |
| 122 | + |
| 123 | + v_positionEC = (czm_modelViewRelativeToEye * p).xyz; |
| 124 | + v_normalEC = czm_normal * normal; |
| 125 | + v_st = st; |
| 126 | +
|
| 127 | + gl_Position = czm_modelViewProjectionRelativeToEye * p; |
| 128 | + }`, |
| 129 | + fragmentShaderSource: ` |
| 130 | + in vec3 v_positionEC; |
| 131 | + in vec3 v_normalEC; |
| 132 | + in vec2 v_st; |
| 133 | + in vec3 v_position; |
| 134 | + |
| 135 | + // The variables passed by appearance.uniforms need to be explicitly declared. |
| 136 | + uniform vec3 customColor; |
| 137 | + uniform float boxSize; |
| 138 | +
|
| 139 | + void main() |
| 140 | + { |
| 141 | + vec3 positionToEyeEC = -v_positionEC; |
| 142 | + vec3 normalEC = normalize(v_normalEC); |
| 143 | +
|
| 144 | + #ifdef FACE_FORWARD |
| 145 | + normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC); |
| 146 | + #endif |
| 147 | +
|
| 148 | + czm_materialInput materialInput; |
| 149 | + materialInput.normalEC = normalEC; |
| 150 | + materialInput.positionToEyeEC = positionToEyeEC; |
| 151 | + materialInput.st = v_st; |
| 152 | + czm_material material = czm_getMaterial(materialInput); |
| 153 | + |
| 154 | + // Use uniform customColor from Appearance to change color |
| 155 | + material.diffuse = customColor; |
| 156 | +
|
| 157 | + // Two random transparent bright lines that are far apart from each other. |
| 158 | + // The value of the uniform variable in Material.uniforms can be obtained through the helper function in Material here. |
| 159 | + int uniformOfMaterial = int(getUniformTimeOfMaterial() * 4.0); |
| 160 | + float s1 = boxSize / 10.0; |
| 161 | + float delta = abs(abs(v_position.z) - float(uniformOfMaterial % int((boxSize / 2.0 - s1) * 100.0)) / 100.0); |
| 162 | + if(delta < s1) |
| 163 | + { |
| 164 | + float scale = 1.0 - delta / s1; |
| 165 | + material.diffuse = vec3(1.0) * scale; |
| 166 | + material.alpha = scale; |
| 167 | + } |
| 168 | +
|
| 169 | + #ifdef FLAT |
| 170 | + out_FragColor = vec4(material.diffuse + material.emission, material.alpha); |
| 171 | + #else |
| 172 | + out_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC); |
| 173 | + #endif |
| 174 | + } |
| 175 | + `, |
| 176 | + materialCacheKey: "my-box-material-appearance", |
| 177 | + }); |
| 178 | + |
| 179 | + // Add uniform variables in the MaterialAppearance layer. |
| 180 | + // These can be used directly in both vertex and fragment shaders. |
| 181 | + // The name of the variable will not change in the final shader. |
| 182 | + const color = new Cesium.Color(1.0, 1.0, 0.0, 1.0); |
| 183 | + appearance.uniforms = { |
| 184 | + frameNumber: 1.0, // Used in vertex shader. |
| 185 | + customColor: color, // Used in fragment shader. |
| 186 | + boxSize: boxSize, // Used in fragment shader. |
| 187 | + }; |
| 188 | + |
| 189 | + return appearance; |
| 190 | + } |
| 191 | + |
| 192 | + // Create a Box primitive with custom material appearance. |
| 193 | + function createBoxPrimitive(destination, appearance) { |
| 194 | + const boxGeometry = Cesium.BoxGeometry.fromDimensions({ |
| 195 | + dimensions: new Cesium.Cartesian3(boxSize, boxSize, boxSize), |
| 196 | + }); |
| 197 | + |
| 198 | + const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(destination); |
| 199 | + |
| 200 | + // Wrap the geometry as GeometryInstance. |
| 201 | + const boxInstance = new Cesium.GeometryInstance({ |
| 202 | + geometry: boxGeometry, |
| 203 | + }); |
| 204 | + |
| 205 | + // Create a Primitive and add it to the scene. |
| 206 | + const primitive = new Cesium.Primitive({ |
| 207 | + geometryInstances: boxInstance, |
| 208 | + appearance: appearance, |
| 209 | + asynchronous: false, |
| 210 | + modelMatrix: modelMatrix, |
| 211 | + }); |
| 212 | + |
| 213 | + return primitive; |
| 214 | + } |
| 215 | + |
| 216 | + // Update uniforms every frame. |
| 217 | + function updateAppearance(appearance) { |
| 218 | + const t = appearance.material.uniforms.time++; |
| 219 | + appearance.uniforms.frameNumber++; |
| 220 | + |
| 221 | + const { customColor } = appearance.uniforms; |
| 222 | + customColor.red = Math.sin(t * 0.01) ** 2 / 1.5; |
| 223 | + customColor.green = Math.sin(t * 0.01 + (2 * Math.PI) / 3) ** 2 / 1.5; |
| 224 | + customColor.blue = Math.sin(t * 0.01 + (4 * Math.PI) / 3) ** 2 / 1.5; |
| 225 | + } |
| 226 | + |
| 227 | + // Initialize Viewer. |
| 228 | + const viewer = new Cesium.Viewer("cesiumContainer"); |
| 229 | + const scene = viewer.scene; |
| 230 | + |
| 231 | + viewer.clock.currentTime.secondsOfDay = 65398; |
| 232 | + scene.globe.enableLighting = true; |
| 233 | + scene.fog.enabled = true; |
| 234 | + |
| 235 | + const destination = { |
| 236 | + x: -2280236.925141378, |
| 237 | + y: 5006991.049189922, |
| 238 | + z: 3215839.258024074, |
| 239 | + }; |
| 240 | + |
| 241 | + const appearance = createMaterialAppearance(); |
| 242 | + const primitive = createBoxPrimitive(destination, appearance); |
| 243 | + scene.preRender.addEventListener(() => { |
| 244 | + updateAppearance(appearance); |
| 245 | + }); |
| 246 | + |
| 247 | + viewer.scene.primitives.add(primitive); |
| 248 | + viewer.camera.lookAt( |
| 249 | + destination, |
| 250 | + new Cesium.HeadingPitchRange(6.283185307179577, -0.4706003213405664, 100), |
| 251 | + ); |
| 252 | + |
| 253 | + //Sandcastle_End |
| 254 | + }; |
| 255 | + if (typeof Cesium !== "undefined") { |
| 256 | + window.startupCalled = true; |
| 257 | + window.startup(Cesium).catch((error) => { |
| 258 | + "use strict"; |
| 259 | + console.error(error); |
| 260 | + }); |
| 261 | + Sandcastle.finishedLoading(); |
| 262 | + } |
| 263 | + </script> |
| 264 | + </body> |
| 265 | +</html> |
0 commit comments