Correct the Skybox fov (#16655)

* Remove undrawn quads from the skybox mesh

CCSkybox had been implemented using a combination of two
inconsistent techniques. The rendering was being achieved via use of
the vertex shader's inherent support for cubemaps. That technique requires
only a single screen-covering quad, but the implemtation defined a cube.
Defining a cube mesh would be appropriate if one were simply mapping the
cubemap's 6 textures to faces, but is unnecessary if using the shader's
cubemap feature.

Not only was the use of a cube mesh unnecessary, but the particular way
the cube was defined and used meant that only one face would ever
contribute to the rendering. One of the other faces would always be culled
and the other four would be viewed edge on, mapping the the infinitesimally
thin lines defining the edges of the screen.

This commit simply removes the never-rendered faces, and adds comments
explaining the technique.

* Within test code, remove setScale calls applied to skyboxes.

A Skybox is defined in such a way that it's position, rotation and
scaling has no effect on it's rendering, so setScale has no effect.
The calls are removed from test code to avoid confusing anyone using
it as a template for their own programs.

* Make the Skybox correctly account for the camera's fov

The Skybox does not use the model/view and projection matricies. Instead
a single quad that maps exactly to the screen is rendered and the camera's
world matrix is passed into a shader that renders using cubemap lookups.
The way that works hardwires the fov to 90deg in both the horizontal and
vertical. That shows up particularly badly when the camera is pointed
directly downwards and rotated: the image deforms as it rotates.

This commit corrects the problem by using scaling factors from the
camera's projection matrix to prescale the matrix passed into the shader.

cocos/3d/CCSkybox.cpp

@@ -109,11 +109,30 @@ void Skybox::initBuffers()
         glGenVertexArrays(1, &_vao);
         GL::bindVAO(_vao);
     }
+	// The skybox is rendered using a purpose-built shader which makes use of
+	// the shader language's inherent support for cubemaps. Hence there is no
+	// need to build a cube mesh. All that is needed is a single quad that
+	// covers the entire screen. The vertex shader will draw the appropriate
+	// view of the cubemap onto that quad.
+	//
+	// The vertex shader does not apply either the model/view matrix or the
+	// projection matrix, so the appropriate quad is one with unit coordinates
+	// in the x and y dimensions. Such a quad will exacly cover the screen.
+	// To ensure that the skybox is rendered behind all other objects, z needs
+	// to be 1.0, but the vertex shader overwrites z to 1.0, so - for the sake
+	// of z-buffering - it is unimportant what we set it to for the verticies
+	// of the quad.
+	//
+	// The quad vertex positions are also used in deriving a direction
+	// vector for the cubemap lookup. We choose z = -1 which matches the
+	// negative-z pointing direction of the camera and gives a field of
+	// view of 90deg in both x and y, if not otherwise adjusted. That fov
+	// is then adjusted to exactly match the camera by applying a prescaling
+	// to the camera's world transformation before sending it to the shader.
 
     // init vertex buffer object
     Vec3 vexBuf[] =
     {
-        Vec3(1, -1, 1),  Vec3(1, 1, 1),  Vec3(-1, 1, 1),  Vec3(-1, -1, 1),
         Vec3(1, -1, -1), Vec3(1, 1, -1), Vec3(-1, 1, -1), Vec3(-1, -1, -1)
     };
 
@@ -122,13 +141,7 @@ void Skybox::initBuffers()
     glBufferData(GL_ARRAY_BUFFER, sizeof(vexBuf), vexBuf, GL_STATIC_DRAW);
 
     // init index buffer object
-    const unsigned char idxBuf[] = {  2, 1, 0, 3, 2, 0, // font
-        1, 5, 4, 1, 4, 0, // right
-        4, 5, 6, 4, 6, 7, // back
-        7, 6, 2, 7, 2, 3, // left
-        2, 6, 5, 2, 5, 1, // up
-        3, 0, 4, 3, 4, 7  // down
-    };
+    const unsigned char idxBuf[] = {0, 1, 2, 0, 2, 3};
 
     glGenBuffers(1, &_indexBuffer);
     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
@@ -157,13 +170,17 @@ void Skybox::onDraw(const Mat4& transform, uint32_t flags)
     auto camera = Camera::getVisitingCamera();
     
     Mat4 cameraModelMat = camera->getNodeToWorldTransform();
+    Mat4 projectionMat = camera->getProjectionMatrix();
+    // Ignore the translation
+    cameraModelMat.m[12] = cameraModelMat.m[13] = cameraModelMat.m[14] = 0;
+    // prescale the matrix to account for the camera fov
+    cameraModelMat.scale(1 / projectionMat.m[0], 1 / projectionMat.m[5], 1.0);
     
     auto state = getGLProgramState();
     state->apply(transform);
 
     Vec4 color(_displayedColor.r / 255.f, _displayedColor.g / 255.f, _displayedColor.b / 255.f, 1.f);
     state->setUniformVec4("u_color", color);
-    cameraModelMat.m[12] = cameraModelMat.m[13] = cameraModelMat.m[14] = 0;
     state->setUniformMat4("u_cameraRot", cameraModelMat);
 
     glEnable(GL_DEPTH_TEST);
@@ -195,7 +212,7 @@ void Skybox::onDraw(const Mat4& transform, uint32_t flags)
         glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
     }
 
-    glDrawElements(GL_TRIANGLES, (GLsizei)36, GL_UNSIGNED_BYTE, nullptr);
+    glDrawElements(GL_TRIANGLES, (GLsizei)6, GL_UNSIGNED_BYTE, nullptr);
 
     if (Configuration::getInstance()->supportsShareableVAO())
     {
@@ -207,7 +224,7 @@ void Skybox::onDraw(const Mat4& transform, uint32_t flags)
         glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
     }
 
-    CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 8);
+    CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 4);
 
     CHECK_GL_ERROR_DEBUG();
 }

tests/cpp-tests/Classes/Scene3DTest/Scene3DTest.cpp

@@ -382,7 +382,6 @@ void Scene3DTestScene::createWorld3D()
     _skyBox = Skybox::create();
     _skyBox->setCameraMask(s_CM[LAYER_BACKGROUND]);
     _skyBox->setTexture(_textureCube);
-    _skyBox->setScale(700.f);
 
     // create terrain
     Terrain::DetailMap r("TerrainTest/dirt.jpg");

tests/js-tests/src/Sprite3DTest/Sprite3DTest.js

@@ -1596,7 +1596,6 @@ var Sprite3DCubeMapTest = Sprite3DTestDemo.extend({
         var skybox = jsb.Skybox.create();
         skybox.setTexture(textureCube);
         this.addChild(skybox);
-        skybox.setScale(700);
 
         this.addChild(camera);
         this.setCameraMask(2);

tests/lua-tests/src/Scene3DTest/Scene3DTest.lua

@@ -349,7 +349,6 @@ function Scene3DTest:create3DWorld()
     self._skyBox = cc.Skybox:create()
     self._skyBox:setCameraMask(s_CM[GAME_LAYER.LAYER_SKYBOX])
     self._skyBox:setTexture(self._textureCube)
-    self._skyBox:setScale(700.0)
     self:addChild(self._skyBox)
 
     local targetPlatform = cc.Application:getInstance():getTargetPlatform()

tests/lua-tests/src/Sprite3DTest/Sprite3DTest.lua

@@ -1179,7 +1179,6 @@ function Sprite3DCubeMapTest:addNewSpriteWithCoords(pos)
 
     self._skyBox:setTexture(self._textureCube)
     self:addChild(self._skyBox)
-    self._skyBox:setScale(700)
 
     self:addChild(camera)
     self:setCameraMask(2)