Modified the shaders slightly
diff --git a/manimlib/shaders/inserts/finalize_color.glsl b/manimlib/shaders/inserts/finalize_color.glsl
index 0664deb0b5..e7b64eee3a 100644
--- a/manimlib/shaders/inserts/finalize_color.glsl
+++ b/manimlib/shaders/inserts/finalize_color.glsl
@@ -17,16 +17,16 @@ vec4 add_light(vec4 color,
                float shadow){
     if(gloss == 0.0 && shadow == 0.0) return color;
 
+    float camera_distance = focal_distance;
+    // Assume everything has already been rotated such that camera is in the z-direction
+    vec3 to_camera = vec3(0, 0, camera_distance) - point;
+    vec3 to_light = light_coords - point;
+
     // TODO, do we actually want this?  It effectively treats surfaces as two-sided
-    if(unit_normal.z < 0){
+    if(dot(to_camera,unit_normal) < 0){
             unit_normal *= -1;
     }
 
-    // TODO, read this in as a uniform?
-    float camera_distance = 6;  
-    // Assume everything has already been rotated such that camera is in the z-direction
-    vec3 to_camera = vec3(0, 0, camera_distance) - point;
-    vec3 to_light = light_coords - point;
     vec3 light_reflection = -to_light + 2 * unit_normal * dot(to_light, unit_normal);
     float dot_prod = dot(normalize(light_reflection), normalize(to_camera));
     float shine = gloss * exp(-3 * pow(1 - dot_prod, 2));
diff --git a/manimlib/shaders/surface/frag.glsl b/manimlib/shaders/surface/frag.glsl
index db90527559..707621a14e 100644
--- a/manimlib/shaders/surface/frag.glsl
+++ b/manimlib/shaders/surface/frag.glsl
@@ -3,6 +3,7 @@
 uniform vec3 light_source_position;
 uniform float gloss;
 uniform float shadow;
+uniform float focal_distance;
 
 in vec3 xyz_coords;
 in vec3 v_normal;
diff --git a/manimlib/shaders/textured_surface/frag.glsl b/manimlib/shaders/textured_surface/frag.glsl
index ab45dad646..616b06e249 100644
--- a/manimlib/shaders/textured_surface/frag.glsl
+++ b/manimlib/shaders/textured_surface/frag.glsl
@@ -6,6 +6,7 @@ uniform float num_textures;
 uniform vec3 light_source_position;
 uniform float gloss;
 uniform float shadow;
+uniform float focal_distance;
 
 in vec3 xyz_coords;
 in vec3 v_normal;
diff --git a/manimlib/shaders/true_dot/frag.glsl b/manimlib/shaders/true_dot/frag.glsl
index a89653595d..0be9a2abe1 100644
--- a/manimlib/shaders/true_dot/frag.glsl
+++ b/manimlib/shaders/true_dot/frag.glsl
@@ -4,6 +4,7 @@ uniform vec3 light_source_position;
 uniform float gloss;
 uniform float shadow;
 uniform float anti_alias_width;
+uniform float focal_distance;
 
 in vec4 color;
 in float radius;

## Motivation
- `camera_distance` is set to be 6 and doesn't change with the `focal_distance`.
- The z coordinate is used to check whether the surface is facing the camera. It generates the wrong result which is particularly obvious when `focal_distance` is small.

## Proposed changes
- Replace `float camera_distance = 6;` with `float camera_distance = focal_distance;`, and add `uniform float focal_distance;` in some shaders.
- Use the dot product to check whether the surface is facing the camera.

## Test
**Code**:
```python
from manimlib import *


class Test(Scene):
    CONFIG = {
        "camera_class": ThreeDCamera,
        "camera_config": {
            "focal_distance": 0.5,
            "light_source_position": [1, 1, -2],
            "frame_config":{
                "frame_shape": (4, 3),
            }
        }
    }

    def construct(self):
        sphere = Sphere(radius=2)
        sphere.shift(DOWN*3.3)
        sphere.set_color('#cccccc')
        self.add(sphere)
        self.wait(1)

```

**Result**:
Before:
![image](https://user-images.githubusercontent.com/36598223/120894198-d72e9a80-c649-11eb-807f-3a6e2e97c324.png)

After:
![image](https://user-images.githubusercontent.com/36598223/120894205-e01f6c00-c649-11eb-97fd-dd95980d4649.png)
