Use custom cube for showing env map. Use shader to access lod.

Apps/Sandcastle/gallery/Hello World.html

@@ -34,7 +34,16 @@
     scene.moon = undefined;
     scene.globe = undefined;
 
-    scene.context.throwOnWebGLError = true;
+    //scene.context.throwOnWebGLError = true;
+
+    var height = 5000000.0;
+    var heading = 0.0;
+    var pitch = 0.0;
+    var roll = 0.0;
+    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+
+    var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
+    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
 
     //var envMapURL = '../../SampleData/models/EnvMap/rustig_koppie_envDiffuseHDR.dds';
     var envMapURL = '../../SampleData/models/EnvMap/rustig_koppie_envSpecularHDR.dds';
@@ -44,8 +53,8 @@
     }).then(function(buffer) {
         var mipLevel = 0;
         var dds = parseDDS(buffer, true);
-        var width = dds.mipmaps[0].width;
-        var height = dds.mipmaps[0].height;
+        var width = dds.mipmaps[mipLevel].width;
+        var height = dds.mipmaps[mipLevel].height;
         var mipmapCount = dds.mipmapCount;
         var sources = {
             positiveX : { arrayBufferView : dds.mipmaps[mipLevel].data, width : width, height : height },
@@ -58,6 +67,8 @@
         var mipLevels = new Array(mipmapCount - 1);
         for (var i = 0; i < mipmapCount - 1; ++i) {
             mipLevel = i + 1;
+            width = dds.mipmaps[mipLevel].width;
+            height = dds.mipmaps[mipLevel].height;
             mipLevels[i] = {
                 positiveX : { arrayBufferView : dds.mipmaps[mipLevel].data, width : width, height : height },
                 negativeX : { arrayBufferView : dds.mipmaps[mipLevel + mipmapCount].data, width : width, height : height },
@@ -67,25 +78,81 @@
                 negativeZ : { arrayBufferView : dds.mipmaps[mipLevel + 5 * mipmapCount].data, width : width, height : height }
             };
         }
-        scene.skyBox = new Cesium.SkyBox({
-            cubeMap : new Cesium.CubeMap({
-                context : scene.context,
-                source : sources,
-                mipLevels : mipLevels,
-                pixelDatatype : Cesium.PixelDatatype.FLOAT
+
+        var cubeMap = new Cesium.CubeMap({
+            context : scene.context,
+            source : sources,
+            mipLevels : mipLevels,
+            pixelDatatype : Cesium.PixelDatatype.FLOAT,
+            sampler : new Cesium.Sampler({
+                minificationFilter : Cesium.TextureMinificationFilter.LINEAR_MIPMAP_LINEAR
+            })
+        });
+
+        var boxGeometryInstance = new Cesium.GeometryInstance({
+            geometry : Cesium.BoxGeometry.fromDimensions({
+                vertexFormat : Cesium.VertexFormat.POSITION_NORMAL_AND_ST,
+                dimensions : new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
             })
         });
+
+        var customAppearance = {};
+        customAppearance.vertexShaderSource =
+            'attribute vec3 position3DHigh;\n' +
+            'attribute vec3 position3DLow;\n' +
+            'attribute vec3 normal;\n' +
+            'attribute vec2 st;\n' +
+            'attribute float batchId;\n' +
+            '\n' +
+            'varying vec3 v_positionEC;\n' +
+            'varying vec3 v_normalEC;\n' +
+            '\n' +
+            'void main()\n' +
+            '{\n' +
+            '    vec4 p = czm_computePosition();\n' +
+            '\n' +
+            '    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;\n' +
+            '    v_normalEC = czm_normal * normal;\n' +
+            '\n' +
+            '    gl_Position = czm_modelViewProjectionRelativeToEye * p;\n' +
+            '}';
+        customAppearance.fragmentShaderSource =
+            'uniform samplerCube u_cubeMap;\n' +
+            'varying vec3 v_positionEC;\n' +
+            'varying vec3 v_normalEC;\n' +
+            //'varying vec2 v_st;\n' +
+            //'\n' +
+            'void main()\n' +
+            '{\n' +
+            '    gl_FragColor = textureLod(u_cubeMap, normalize((czm_inverseModelView * vec4(v_positionEC, 1.0)).xyz), 5.0);\n' +
+            '}\n';
+        customAppearance.isTranslucent = function() { return false; };
+        customAppearance.getRenderState = function() {
+            return {
+                depthTest : {
+                    enabled : true
+                }
+            };
+        };
+        customAppearance.getVertexShaderSource = function() { return this.vertexShaderSource; };
+        customAppearance.getFragmentShaderSource = function() { return this.fragmentShaderSource; };
+        customAppearance.material = {
+            update : function() {},
+            _uniforms : {
+                u_cubeMap : function() {
+                    return cubeMap;
+                }
+            }
+        };
+        scene.primitives.add(new Cesium.Primitive({
+            geometryInstances : boxGeometryInstance,
+            appearance : customAppearance,
+            asynchronous : false,
+            modelMatrix : modelMatrix
+        }));
     });
 
     var modelURL = '../../SampleData/models/Spheres/MetalRoughSpheres.glb';
-    var height = 5000000.0;
-    var heading = 0.0;
-    var pitch = 0.0;
-    var roll = 0.0;
-    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
-
-    var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
-    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
 
     var model = scene.primitives.add(Cesium.Model.fromGltf({
         url : modelURL,
@@ -178,12 +245,20 @@
             var src = 0;
             for (var y = 0; y < height; y++) {
                 for (var x = 0; x < width; x++) {
+                    /*
                     var b = srcBuffer[src];
                     src++;
                     var g = srcBuffer[src];
                     src++;
                     var r = srcBuffer[src];
                     src++;
+                    */
+                    var r = srcBuffer[src];
+                    src++;
+                    var g = srcBuffer[src];
+                    src++;
+                    var b = srcBuffer[src];
+                    src++;
                     var a = srcBuffer[src];
                     src++;
                     byteArray[dst] = r;

Source/Renderer/CubeMap.js

@@ -194,8 +194,8 @@ define([
 
             var mipLevels = options.mipLevels;
             if (defined(mipLevels)) {
-                gl.generateMipmap(textureTarget);
                 var mipLevelsLength = mipLevels.length;
+                gl.generateMipmap(textureTarget);
                 for (var j = 0; j < mipLevelsLength; ++j) {
                     createFace(gl.TEXTURE_CUBE_MAP_POSITIVE_X, mipLevels[j].positiveX, j + 1, preMultiplyAlpha, flipY);
                     createFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, mipLevels[j].negativeX, j + 1, preMultiplyAlpha, flipY);
@@ -204,6 +204,7 @@ define([
                     createFace(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, mipLevels[j].positiveZ, j + 1, preMultiplyAlpha, flipY);
                     createFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, mipLevels[j].negativeZ, j + 1, preMultiplyAlpha, flipY);
                 }
+                this._hasMipmap = true;
             }
         } else {
             gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
@@ -375,6 +376,9 @@ define([
      * });
      */
     CubeMap.prototype.generateMipmap = function(hint) {
+        if (this._hasMipmap) {
+            return;
+        }
         hint = defaultValue(hint, MipmapHint.DONT_CARE);
 
         //>>includeStart('debug', pragmas.debug);

Source/Scene/SkyBox.js

@@ -99,7 +99,7 @@ define([
             modelMatrix : Matrix4.clone(Matrix4.IDENTITY),
             owner : this
         });
-        this._cubeMap = options.cubeMap;
+        this._cubeMap = undefined;
 
         this._attributeLocations = undefined;
         this._useHDR = undefined;
@@ -135,7 +135,7 @@ define([
 
         var context = frameState.context;
 
-        if (defined(this.sources) && this._sources !== this.sources) {
+        if (this._sources !== this.sources) {
             this._sources = this.sources;
             var sources = this.sources;
 

Source/Shaders/SkyBoxFS.glsl

@@ -4,8 +4,7 @@ varying vec3 v_texCoord;
 
 void main()
 {
-    //vec3 rgb = textureCube(u_cubeMap, normalize(v_texCoord)).rgb;
-    vec3 rgb = textureLod(u_cubeMap, normalize(v_texCoord), 8.0).rgb;
-    //rgb = czm_gammaCorrect(rgb);
+    vec3 rgb = textureCube(u_cubeMap, normalize(v_texCoord)).rgb;
+    rgb = czm_gammaCorrect(rgb);
     gl_FragColor = vec4(rgb, czm_morphTime);
 }