Feat/add double side

packages/core/src/material/BlinnPhongMaterial.ts

@@ -2,6 +2,7 @@ import { Color } from "@oasis-engine/math";
 import { Engine } from "../Engine";
 import { BlendFactor } from "../shader/enums/BlendFactor";
 import { BlendOperation } from "../shader/enums/BlendOperation";
+import { CullMode } from "../shader/enums/CullMode";
 import { Shader } from "../shader/Shader";
 import { Texture2D } from "../texture/Texture2D";
 import { AlphaMode } from "./enums/AlphaMode";
@@ -157,6 +158,7 @@ export class BlinnPhongMaterial extends Material {
 
     switch (v) {
       case AlphaMode.Opaque:
+      case AlphaMode.CutOff:
         {
           target.sourceColorBlendFactor = target.sourceAlphaBlendFactor = BlendFactor.One;
           target.destinationColorBlendFactor = target.destinationAlphaBlendFactor = BlendFactor.Zero;
@@ -174,15 +176,22 @@ export class BlinnPhongMaterial extends Material {
           this.renderQueueType = RenderQueueType.Transparent;
         }
         break;
-      case AlphaMode.CutOff:
-        {
-          target.sourceColorBlendFactor = target.sourceAlphaBlendFactor = BlendFactor.One;
-          target.destinationColorBlendFactor = target.destinationAlphaBlendFactor = BlendFactor.Zero;
-          target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
-          depthState.writeEnabled = true;
-          this.renderQueueType = RenderQueueType.AlphaTest;
-        }
-        break;
+    }
+  }
+
+  /**
+   * Whether to render both sides.
+   * @remarks Only the front side is rendered by default
+   */
+  get doubleSided(): boolean {
+    return this._doubleSided;
+  }
+
+  set doubleSided(v: boolean) {
+    if (v) {
+      this.renderState.rasterState.cullMode = CullMode.Off;
+    } else {
+      this.renderState.rasterState.cullMode = CullMode.Back;
     }
   }
 
@@ -196,6 +205,7 @@ export class BlinnPhongMaterial extends Material {
   private _specularTexture: Texture2D;
   private _shininess: number = 16;
   private _alphaMode: AlphaMode = AlphaMode.Opaque;
+  private _doubleSided: boolean = false;
 
   constructor(engine: Engine) {
     super(engine, Shader.find("blinn-phong"));

packages/core/src/material/PBRMaterial.ts

@@ -2,6 +2,7 @@ import { Color, Matrix } from "@oasis-engine/math";
 import { Engine } from "../Engine";
 import { BlendFactor } from "../shader/enums/BlendFactor";
 import { BlendOperation } from "../shader/enums/BlendOperation";
+import { CullMode } from "../shader/enums/CullMode";
 import { Shader } from "../shader/Shader";
 import { TextureCubeMap } from "../texture";
 import { Texture2D } from "../texture/Texture2D";
@@ -578,6 +579,22 @@ export class PBRMaterial extends Material {
     }
   }
 
+  /**
+   * Whether to render both sides.
+   * @remarks Only the front side is rendered by default
+   */
+  get doubleSided(): boolean {
+    return this._doubleSided;
+  }
+
+  set doubleSided(v: boolean) {
+    if (v) {
+      this.renderState.rasterState.cullMode = CullMode.Off;
+    } else {
+      this.renderState.rasterState.cullMode = CullMode.Back;
+    }
+  }
+
   private _baseColor: Color = new Color(1, 1, 1, 1);
   private _metallicFactor: number = 1;
   private _roughnessFactor: number = 1;
@@ -614,6 +631,7 @@ export class PBRMaterial extends Material {
   private _isMetallicWorkflow: boolean = true;
   private _envMapModeRefract: boolean = false;
   private _alphaMode: AlphaMode = AlphaMode.Opaque;
+  private _doubleSided: boolean = false;
 
   constructor(engine: Engine) {
     super(engine, Shader.find("pbr"));

packages/core/src/shaderlib/extra/blinn-phong.fs.glsl

@@ -21,6 +21,7 @@ void main() {
     #include <mobile_blinnphong_frag>
 
     gl_FragColor = emission + ambient + diffuse + specular;
+    gl_FragColor.a = diffuse.a;
 
     #include <fog_frag>
 

packages/loader/src/gltf/glTF.ts

@@ -7,7 +7,6 @@ import {
   BufferBindFlag,
   BufferUsage,
   Camera,
-  CullMode,
   Engine,
   EngineObject,
   Entity,
@@ -306,11 +305,7 @@ export function parseMaterial(gltfMaterial, resources) {
       }
     }
 
-    if (doubleSided) {
-      material.renderState.rasterState.cullMode = CullMode.Off;
-    } else {
-      material.renderState.rasterState.cullMode = CullMode.Back;
-    }
+    material.doubleSided = doubleSided;
 
     switch (alphaMode) {
       case "OPAQUE":