some edit

src/views/Home.vue

@@ -10,11 +10,13 @@
         </div>
         <div id="middle">
             <div id="viewerContainner">
-              
-            </div>
-            <div id="assetsList">
+              <!-- viewSize : x = {{ viewSize.x }}, y = {{ viewSize.y }}  <br/>
+              styleSize : x = {{ styleSize.x }}, y = {{ styleSize.y }}   -->
 
             </div>
+            <div id="assetsListContainner">
+              <assets-list :assets="assets" ></assets-list>
+            </div>
         </div>
         <div id="right"></div>
       </div>
@@ -23,9 +25,12 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import AssetsList from '../components/AssetsList.vue'
+
+
+import * as THREE from 'three'
 import Viewer from '../webgl/Viewer'
 import MarmosetAssetsManager from '../webgl/assets/marmosets/MarmosetAssetsManager'
-import * as THREE from 'three'
 import { MeshMaterial } from '../webgl/materials/marmoset';
 
 const examples = [
@@ -35,15 +40,20 @@ const examples = [
 ]
 
 
-@Component
+
+@Component({
+  components: { 
+    'assets-list': AssetsList
+  }
+})
 export default class Home extends Vue {
 
-  materials: MeshMaterial[] = []
+  assets:any[] = []
 
   mounted() {
 
     let containner = this.$el.querySelector("#viewerContainner") as HTMLDivElement;
-    let viewer = new Viewer();
+    let viewer = new Viewer()
     viewer.start(containner)
     
     let loader = new MarmosetAssetsManager()
@@ -53,20 +63,18 @@ export default class Home extends Vue {
     loader.load(examples[index]).then( model => {
 
       model && viewer.add(model);
+
+      window['model'] = model
       
       let ms = loader.getMaterials();
-      ms.forEach( item => this.materials.push(item));
+      ms.forEach( item => this.assets.push(item));
 
     })
     window.THREE = THREE
-
-  }
-
-  showAssetsList( flag: number ) {
-
     
 
   }
+
 }
 </script>
 <style lang="less" scoped>
@@ -75,7 +83,7 @@ export default class Home extends Vue {
 
 
     display: flex;
-    flex-direction: column;
+
     justify-content: space-between;
 
     position: fixed;
@@ -92,6 +100,7 @@ export default class Home extends Vue {
 
       flex: 1;
       border: 1px solid red;
+   
       height: 100%;
 
       display: flex;
@@ -112,8 +121,7 @@ export default class Home extends Vue {
 
       display: flex;
       flex-direction: column;
-
-      
+      justify-content: space-between;
 
     }
   
@@ -122,15 +130,21 @@ export default class Home extends Vue {
       width: 200px;
     }
 
-    #assetsList {
+    #assetsListContainner {
 
       height: 200px;
+      border: 1px solid green;
+
+      flex-shrink: 0;
+
     }
 
     #viewerContainner {
 
       flex: 1;
-
+      border: 1px solid blue;
+      overflow: hidden;
+   
     }
 
   }

src/views/RTTest.vue

@@ -104,7 +104,7 @@ export default class RTTest extends Vue {
     
     });
      
-    let rt = new THREE.WebGLRenderTarget(256,256, { format: THREE.RGBAFormat })
+    let rt = new THREE.WebGLRenderTarget(256,256, { format: THREE.RGBAFormat, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter })
 
     let rtMesh = new THREE.Mesh( rtGeometry, rtMaterial );
     let rtCamera = new THREE.OrthographicCamera(-100, 100, 100, -100, 0.1, 100);

src/views/TextureViewer.vue

@@ -33,7 +33,7 @@ export default class TextureViewer extends Vue {
 
     let model = new MarmosetModel();
 
-    let index = Number(this.$route.query['index'])
+    let index = Number(this.$route.query['index']) || 0
 
     assetsMgr.load(examples[index]).then( model => {
 

src/webgl/Viewer.ts

@@ -13,7 +13,7 @@ class Viewer {
     private viewSize: THREE.Vector2;
     private container: HTMLDivElement | null;
 
-      renderer: THREE.WebGLRenderer;
+    renderer: THREE.WebGLRenderer;
     private composer: EffectComposer
 
     private scene: THREE.Scene
@@ -27,7 +27,7 @@ class Viewer {
         this.container = null;
         this.viewSize = new THREE.Vector2();
 
-        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer = new THREE.WebGLRenderer({  antialias: true });
         this.composer = new EffectComposer(this.renderer);
         
         this.scene = new THREE.Scene();
@@ -36,6 +36,7 @@ class Viewer {
         
         this.stats = Stats();
         
+       
     }
 
     init() {
@@ -47,8 +48,7 @@ class Viewer {
         this.renderer.domElement.style.height = '100%';
         
         this.composer.addPass(new RenderPass(this.scene, this.camera));
-        //this.composer.addPass(new TestPass())
-
+     
         this.camera.aspect = window.innerWidth / window.innerHeight;
         this.camera.position.set(0, 20.51227126407633, 50.3253462213248);
         this.camera.updateProjectionMatrix();
@@ -121,7 +121,8 @@ class Viewer {
         let width = this.container && this.container.clientWidth || window.innerWidth;
         let height = this.container && this.container.clientHeight || window.innerHeight;
 
-        this.renderer.setSize(width, height, false);
+
+        this.renderer.setSize(width, height , false);
         this.camera.aspect = width / height;
         this.camera.updateProjectionMatrix();
 

src/webgl/assets/marmosets/MviewFiles/PostEffect.ts

@@ -43,7 +43,7 @@ interface PostEffect {
 
     
 
-    colorLUT: []
+    colorLUT: number[]
 }
 
 export default PostEffect

src/webgl/assets/marmosets/shaders/ShaderCache.ts

@@ -1,4 +1,4 @@
-export default class ShaderCache {
+class ShaderCache {
 
     chunks: { }
 
@@ -8,4 +8,6 @@ export default class ShaderCache {
 
     }
 
-}
+}
+
+export default new ShaderCache();

src/webgl/assets/marmosets/shaders/alphaprepass.ts

@@ -1,83 +0,0 @@
-import * as THREE from 'three'
-
-type AttributesDescription = {
-
-    vPosition:THREE.Vector3
-    
-    vTexCoord: THREE.Vector2
-
-}
-
-type VaryingDescription = {
-
-    d: THREE.Vector2
-
-}
-
-const uniforms = {
-
-    uModelViewProjectionMatrix: { value: new THREE.Matrix4 },
-
-    uUVOffset: { value: new THREE.Vector2 },
-
-
-}
-
-export default {
-
-    attributesDescription: undefined as AttributesDescription | undefined,
-
-    varyingDescription: undefined as VaryingDescription | undefined,
-
-    uniforms: uniforms,
-    
-    vetexShader: `
-    
-        precision highp float;
-
-        uniform mat4 uModelViewProjectionMatrix;
-        uniform vec2 uUVOffset;
-        
-        attribute vec3 vPosition;
-        attribute vec2 vTexCoord;
-        
-        varying mediump vec2 d;
-        
-        
-        vec4 mul(mat4 i,vec3 p)     //mulPoint
-        {
-            return i[0] * p.x + ( i[1] * p.y + ( i[2]*p.z + i[3]) );
-        }
-        
-        void main(void)
-        {
-            gl_Position= mul( uModelViewProjectionMatrix, vPosition.xyz);
-            d = vTexCoord + uUVOffset;
-        }
-    `,
-
-    fragmentShader: `
-    
-        precision mediump float;
-
-        #include <matdither.glsl>
-        
-        uniform sampler2D tAlbedo;
-        
-        varying mediump vec2 vUv;
-        
-        void main()
-        {
-            float albedo=texture2D(tAlbedo,vUv).a;
-            
-            if(albedo<=f(vUv.x))
-            {
-                discard;
-            }
-        
-            gl_FragColor=vec4(0.0);
-        }
-    
-    `
-
-}

src/webgl/assets/marmosets/shaders/bloom.ts

@@ -1,83 +0,0 @@
-import * as THREE from 'three'
-
-type AttributesDescription = {
-
-    vPosition:THREE.Vector3
-    
-    vTexCoord: THREE.Vector2
-
-}
-
-type VaryingDescription = {
-
-    d: THREE.Vector2
-
-}
-
-const uniforms = {
-
-    uModelViewProjectionMatrix: { value: new THREE.Matrix4 },
-
-    uUVOffset: { value: new THREE.Vector2 },
-
-
-}
-
-export default {
-
-    attributesDescription: undefined as AttributesDescription | undefined,
-
-    varyingDescription: undefined as VaryingDescription | undefined,
-
-    uniforms: uniforms,
-    
-    vetexShader: `
-    
-        precision highp float;
-
-        uniform mat4 uModelViewProjectionMatrix;
-        uniform vec2 uUVOffset;
-        
-        attribute vec3 vPosition;
-        attribute vec2 vTexCoord;
-        
-        varying mediump vec2 d;
-        
-        
-        vec4 mul(mat4 i,vec3 p)     //mulPoint
-        {
-            return i[0] * p.x + ( i[1] * p.y + ( i[2]*p.z + i[3]) );
-        }
-        
-        void main(void)
-        {
-            gl_Position= mul( uModelViewProjectionMatrix, vPosition.xyz);
-            d = vTexCoord + uUVOffset;
-        }
-    `,
-
-    fragmentShader: `
-    
-        precision mediump float;
-
-        #include <matdither.glsl>
-        
-        uniform sampler2D tAlbedo;
-        
-        varying mediump vec2 vUv;
-        
-        void main()
-        {
-            float albedo=texture2D(tAlbedo,vUv).a;
-            
-            if(albedo<=f(vUv.x))
-            {
-                discard;
-            }
-        
-            gl_FragColor=vec4(0.0);
-        }
-    
-    `
-
-}

src/webgl/assets/marmosets/shaders/posteffect.ts

@@ -1,156 +0,0 @@
-import * as THREE from 'three'
-
-type AttributesDescription = {
-
-    vPosition:THREE.Vector3
-    
-    vTexCoord: THREE.Vector2
-
-}
-
-type VaryingDescription = {
-
-    d: THREE.Vector2
-
-}
-
-const uniforms = {
-
-  
-}
-
-export default {
-
-
-    attibuteDescription: {} as AttributesDescription,
-
-    varying: {} as VaryingDescription,
-
-    uniforms: uniforms,
-
-    vertexShader :`
-
-            varying vec2 j;
-
-            void main() {
-
-                j = uv;
-                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-
-            }
-
-    `,
-
-    fragmentShader:`
-
-        precision mediump float;
-
-        uniform sampler2D tInput;
-        
-        #ifdef BLOOM
-        uniform sampler2D tBloom;
-        #endif 
-        
-        #ifdef GRAIN
-        uniform sampler2D tGrain;
-        #endif 
-        
-        #ifdef COLOR_LUT
-        uniform sampler2D tLUT;
-        #endif 
-        
-        uniform vec3 uScale;
-        uniform vec3 uBias;
-        uniform vec3 uSaturation;
-        uniform vec4 uSharpenKernel;
-        uniform vec3 uSharpness;
-        uniform vec3 uBloomColor;
-        uniform vec4 uVignetteAspect;
-        uniform vec4 uVignette;
-        uniform vec4 uGrainCoord;
-        uniform vec2 uGrainScaleBias;
-        
-        varying vec2 j;
-        
-        vec3 iY(vec3 c)
-        {
-            vec3 iZ=sqrt(c);
-            return(iZ-iZ*c)+c*(0.4672*c+vec3(0.5328));
-        }
-        
-        void main(void)
-        {
-            vec4 jc=texture2D(tInput,j);
-            vec3 c=jc.xyz;
-        
-            #ifdef SHARPEN
-            vec3 hM=texture2D(tInput,j+uSharpenKernel.xy).xyz;
-            hM+=texture2D(tInput,j-uSharpenKernel.xy).xyz;
-            hM+=texture2D(tInput,j+uSharpenKernel.zw).xyz;
-            hM+=texture2D(tInput,j-uSharpenKernel.zw).xyz;
-            vec3 jd=uSharpness.x*c-uSharpness.y*hM;
-            c+=clamp(jd,-uSharpness.z,uSharpness.z);
-            #endif 
-        
-            #ifdef BLOOM
-            c+=uBloomColor*texture2D(tBloom,j).xyz;
-            #endif 
-        
-            #ifdef VIGNETTE
-            vec2 je=j*uVignetteAspect.xy-uVignetteAspect.zw;
-            vec3 v=clamp(vec3(1.0,1.0,1.0)-uVignette.xyz*dot(je,je),0.0,1.0);
-            vec3 jf=v*v;
-            jf*=v;
-            c*=mix(v,jf,uVignette.w);
-            #endif 
-        
-            #ifdef SATURATION
-            float gray=dot(c,vec3(0.3,0.59,0.11));
-            c=mix(vec3(gray,gray,gray),c,uSaturation);
-            #endif 
-        
-            #ifdef CONTRAST
-            c=c*uScale+uBias;
-            #endif 
-        
-            #ifdef GRAIN
-            float jh=uGrainScaleBias.x*texture2D(tGrain,j*uGrainCoord.xy+uGrainCoord.zw).x+uGrainScaleBias.y;
-            c+=c*jh;
-            #endif 
-        
-            #ifdef REINHARD
-            {
-                c*=1.8;
-                float ji=dot(c,vec3(0.3333));
-                c=clamp(c/(1.0+ji),0.0,1.0);
-            }
-            #elif defined(HEJL)
-            {
-                const highp float jj=0.22,jk=0.3,jl=.1,jm=0.2,jn=.01,jo=0.3;
-                const highp float ju=1.25;
-                highp vec3 eO=max(vec3(0.0),c-vec3(.004));
-                c=(eO*((ju*jj)*eO+ju*vec3(jl*jk,jl*jk,jl*jk))+ju*vec3(jm*jn,jm*jn,jm*jn))/(eO*(jj*eO+vec3(jk,jk,jk))+vec3(jm*jo,jm*jo,jm*jo))-ju*vec3(jn/jo,jn/jo,jn/jo);
-            }
-            #elif defined(ACES)
-            {
-                vec3 a=c*(c+0.0245786)-0.000090537;
-                vec3 b=c*(0.983729*c+0.4329510)+0.238081;
-                c=a/b;
-            }
-            #endif 
-        
-            #ifdef COLOR_LUT
-            c=clamp(c,0.0,1.0);
-            c=(255.0/256.0)*c+vec3(0.5/256.0);
-            c.x=texture2D(tLUT,c.xx).x;
-            c.y=texture2D(tLUT,c.yy).y;
-            c.z=texture2D(tLUT,c.zz).z;
-            c*=c;
-            #endif 
-        
-            gl_FragColor.xyz=iY(c);
-            gl_FragColor.w=jc.w;
-        }
-    `
-
-}

src/webgl/materials/marmoset/MeshMaterial.ts

@@ -30,21 +30,20 @@ export default class MeshMaterial extends THREE.MeshPhysicalMaterial {
     build( parameter: MaterialParameter, textures: Map<string, MarmosetTexture>, envMap?: THREE.CubeTexture ) {
 
         this.name = parameter.name;
-        console.log(parameter)
-
+      
         //this.side = THREE.DoubleSide
         
         this.color.set(0xffffff)
         this.map = textures.get(parameter.albedoTex) || null
         
-        //this.normalScale = new THREE.Vector2(0,0);
+        this.normalScale = new THREE.Vector2(0,0);
         this.normalMap = textures.get(parameter.normalTex) || null; 
         this.normalMapType = THREE.TangentSpaceNormalMap  
        
-        //this.metalness = 1
+        this.metalness = 0.5;
         this.metalnessMap = textures.get(parameter.reflectivityTex) || null;
 
-        //this.roughness = 0;
+        this.roughness = 0.5;
         this.roughnessMap = textures.get(parameter.glossTex) || null;
 
         // this.clearcoat = 0.6

src/webgl/materials/marmoset/index.ts

@@ -1,12 +1,14 @@
-
+import BasicMaterial from './BasicMaterial'
 import MeshMaterial from './MeshMaterial'
-
+import ComplexMaterial from './ComplexMaterial'
 
 
 
 
 export {
 
-    MeshMaterial
-
+    BasicMaterial,
+    MeshMaterial,
+    ComplexMaterial
+    
 }

src/webgl/objects/MarmosetModel.ts

@@ -2,8 +2,7 @@ import * as THREE from 'three'
 import BufferReader from '../assets/marmosets/parser/BufferReader';
 
 import { MviewAsset, Scene as MviewScene, Mesh as MviewMesh, Material as MviewMaterial } from '../assets/marmosets/MviewFiles';
-import { MeshMaterial } from '../materials/marmoset'
-import BasicMaterial from '../materials/marmoset/BasicMaterial';
+import { BasicMaterial, MeshMaterial, ComplexMaterial } from '../materials/marmoset'
 
 class MarmosetModel extends THREE.Object3D {
 
@@ -68,9 +67,11 @@ class MarmosetModel extends THREE.Object3D {
 
     buildMesh( mviewMesh: MviewMesh, asset: MviewAsset, materialAssets: Map<string, MeshMaterial>) {
 
+       
+
         let bufferReader = new BufferReader(asset.data);
 
-        let stride = 32; //8 字节   position 3 * 4, uv 2 * 4, tangent 1 * 4, bitTangent 1 * 4, normal 1 *4 
+        let stride = 32; //32 字节   position 3 * 4, uv 2 * 4, tangent 1 * 4, bitTangent 1 * 4, normal 1 *4 
 
         let indexBuffer = bufferReader.readBytes(mviewMesh.indexCount * mviewMesh.indexTypeSize);
         let indexBufferAttribute = mviewMesh.indexTypeSize == 2 ? new THREE.Uint16BufferAttribute(indexBuffer, 1) : new THREE.Uint32BufferAttribute(indexBuffer, 1);
@@ -170,9 +171,7 @@ class MarmosetModel extends THREE.Object3D {
             useTHREE ? geometry.setAttribute("normal", normalAttribute) : geometry.setAttribute("aNormal", normalAttribute);
             geometry.setIndex(indexBufferAttribute);
 
-            geometry.computeBoundingBox()
-            geometry.computeBoundingSphere()
-            
+          
         
         for(let i = 0; i < mviewMesh.subMeshes.length; i++ ) {
 
@@ -181,7 +180,7 @@ class MarmosetModel extends THREE.Object3D {
             
         }
 
-        let materials = mviewMesh.subMeshes.map( item => materialAssets.get(item.material) || new BasicMaterial())
+        let materials = mviewMesh.subMeshes.map( item => materialAssets.get(item.material) || new BasicMaterial());
     
         let mesh = new THREE.Mesh(geometry, materials );
             mesh.name = mviewMesh.name