Guest User

Untitled

a guest
Feb 26th, 2021
60
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let parsedGR2s = [];
  2. let customObjectList = [];
  3. let globalCameraState, focusHead, focusWhole, camNeedsReset;
  4.  
  5. let canvas, loader, ddsLoader, postScene, controls, axesHelper, renderer, postCamera;
  6. let camera, scene, target;
  7. let zoomInInterval, zoomOutInterval, rotateLeftInterval, rotateRightInterval;
  8. let hemiLight, hemiHelper;
  9. let pointLight, pointHelper;
  10.  
  11. //let ambLight, ambHelper; //<-- maybe use this
  12.  
  13. const params = {
  14.     format: THREE.DepthFormat,
  15.     type: THREE.UnsignedShortType
  16. };
  17.  
  18.  
  19. const planeGeom = new THREE.PlaneGeometry( 5, 20, 32 );
  20. const planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  21. const plane = new THREE.Mesh( planeGeom, planeMaterial );
  22.  
  23. const skinBFrag = document.getElementById("SkinBShader").textContent;
  24.  
  25. THREE.Cache.enabled = true;
  26.  
  27. const vertShaderText = `
  28.     //Input variables
  29.     attribute vec4 aNormal;
  30.     attribute vec4 aTangent;
  31.  
  32.     //For AnimatedUV
  33.     uniform bool isAnimatedUV;
  34.     uniform float Clock;
  35.     uniform float ClockRandomOffset;
  36.     uniform vec2 animTexUVScrollSpeed0;
  37.     uniform vec2 animTexRotationPivot0;
  38.     uniform float animTexRotationSpeed0;
  39.     uniform vec2 animTexUVScrollSpeed1;
  40.     uniform vec2 animTexRotationPivot1;
  41.     uniform float animTexRotationSpeed1;
  42.     uniform vec2 animTexUVScrollSpeed2;
  43.     uniform vec2 animTexRotationPivot2;
  44.     uniform float animTexRotationSpeed2;
  45.  
  46.  
  47.     //lighting
  48.     uniform vec3 viewNormal;
  49.     uniform vec3 lightPos;
  50.     uniform mat4 lightProjectionMatrix;
  51.     uniform mat4 lightProjectionMatrixInverse;
  52.  
  53.     struct OutputVertex {
  54.         vec4 light_Dir; //illumNormal_vNx
  55.         vec4 view_Dir; //viewNormal_vNy
  56.         vec4 illumCoords; //illumCoords_vNz
  57.         vec4 fallOffCoords; //falloffCoords
  58.         vec4 shadowCoords; //shadowCoords
  59.         vec4 o_pos; //object position in world space
  60.  
  61.         //Object space
  62.         vec4 w_pos;
  63.  
  64.         //World space
  65.         vec2 texCoord;
  66.         vec4 o_normal;
  67.         vec3 w_normal;
  68.         vec3 w_tangent;
  69.         vec3 w_binormal;
  70.  
  71.         //light space
  72.         vec4 l_pos;
  73.     };
  74.    
  75.     varying OutputVertex In;
  76.  
  77.     void calcLighting(OutputVertex out_vert) {
  78.         vec4 pointLight01_Dir = vec4(lightPos, 1.0) - out_vert.w_pos;
  79.         vec3 illum = pointLight01_Dir.xyz - out_vert.w_pos.xyz * pointLight01_Dir.www;
  80.  
  81.         //vec4 illumCoords = calcIllumMapCoords(out_vert.w_pos);
  82.  
  83.         //output variable setting
  84.         out_vert.light_Dir = pointLight01_Dir;  
  85.         out_vert.view_Dir =  vec4(cameraPosition, 1.0) - out_vert.w_pos;
  86.  
  87.         out_vert.l_pos = (lightProjectionMatrix * lightProjectionMatrixInverse) * modelMatrix * out_vert.o_pos;
  88.     }
  89.  
  90.     //dont mess with this
  91.     void main(void) {
  92.         OutputVertex out_vert;
  93.         out_vert.o_pos = vec4(position, 1.0);
  94.         out_vert.w_pos = modelViewMatrix * modelMatrix * out_vert.o_pos;
  95.         gl_Position = projectionMatrix * out_vert.w_pos;
  96.        
  97.         out_vert.o_normal = (aNormal / 127.5) - vec4(1.0,1.0,1.0,1.0);
  98.         vec3 w_normal = (2.0/255.0) * aNormal.xyz - 1.0;
  99.         vec3 w_tangent = (2.0/255.0) * aTangent.xyz - 1.0;
  100.         out_vert.w_normal = mat3(viewMatrix) * w_normal;
  101.         out_vert.w_tangent = mat3(viewMatrix) * w_tangent;
  102.         out_vert.w_binormal = cross(w_normal, w_tangent);
  103.         out_vert.texCoord = uv;
  104.  
  105.         calcLighting(out_vert);
  106.  
  107.         In = out_vert;
  108.     }
  109. `
  110.  
  111. function init() {
  112.     initConsts();
  113.  
  114.     setupRenderTarget();
  115.  
  116.     addNavListeners();
  117. }
  118.  
  119. function setupRenderTarget() {
  120.  
  121.     if ( target ) target.dispose();
  122.  
  123.     const format = parseFloat( params.format );
  124.     const type = parseFloat( params.type );
  125.  
  126.     target = new THREE.WebGLRenderTarget( 512, 512 );
  127.     target.stencilBuffer = ( format === THREE.DepthStencilFormat ) ? true : false;
  128.     target.depthBuffer = true;
  129.     target.depthTexture = new THREE.DepthTexture();
  130.     target.depthTexture.format = format;
  131.     target.depthTexture.type = type;
  132. }
  133.  
  134. function initConsts() {
  135.     canvas = document.getElementById("toonSceneCanvas");
  136.     loader = new THREE.FileLoader();
  137.     loader.setResponseType("arraybuffer");
  138.     ddsLoader = new DDSLoader();
  139.  
  140.     scene = new THREE.Scene();
  141.  
  142.     postScene = new THREE.Scene();
  143.     postScene.background = new THREE.Color(0x051021);
  144.  
  145.     postCamera = new THREE.PerspectiveCamera(75, 742 / 742, 0.005, 1000);
  146.     postCamera.position.set(0, 0, 0);
  147.     postCamera.up = new THREE.Vector3(0, 1, 0);
  148.     //ideal full body camera position {x: 0, y: 0.1332955862416036, z: 0.15043292842149866, isVector3: true}
  149.     postScene.add(postCamera);
  150.  
  151.     hemiLight = new THREE.HemisphereLight(0xdef5fa, 0x3c3d2f);
  152.     hemiLight.position.set(0, .4, 0);
  153.     postScene.add(hemiLight);
  154.  
  155.     hemiHelper = new THREE.HemisphereLightHelper(hemiLight, .01, 0xffffff);
  156.     postScene.add(hemiHelper);
  157.  
  158.     pointLight = new THREE.PointLight(0xffffff, 1.0);
  159.     pointLight.position.set(-0.317462, 0.138977, 0.048887);
  160.     postScene.add(pointLight);
  161.  
  162.     camera = new THREE.PerspectiveCamera(75, 742 / 742, 0.005, 1000);
  163.     camera.position.copy(pointLight.position);
  164.     camera.up = new THREE.Vector3(0, 1, 0);
  165.     scene.add(camera);
  166.  
  167.     pointHelper = new THREE.HemisphereLightHelper(pointLight, .01, 0xffffff);
  168.     postScene.add(pointHelper);
  169.  
  170.     renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
  171.     renderer.setPixelRatio(window.devicePixelRatio);
  172.     renderer.setSize(742, 742);
  173.     renderer.setClearColor(0x051021, 1);
  174.  
  175.     axesHelper = new AxesHelper();
  176.     postScene.add(axesHelper);
  177.  
  178.     controls = new OrbitControls(postCamera, canvas);
  179.     //controls.enablePan = false;
  180.     //controls.enableKeys = false;
  181.  
  182.     globalCameraState = "whole";
  183.     focusWhole = false;
  184.     focusHead = true;
  185.     camNeedsReset = false;
  186. }
  187.  
  188. function createMaterial(matInfo, ddsList, bufferGeometry, shouldRemoveLoad) {
  189.     var shader;
  190.     matInfo.lightPos = pointLight.position;
  191.     matInfo.lightIntensity = pointLight.intensity;
  192.     matInfo.lightColor = pointLight.color;
  193.     matInfo.lightProjectionMatrix = camera.projectionMatrix;
  194.     matInfo.lightProjectionMatrixInverse = camera.projectionMatrixInverse;
  195.     switch (matInfo.derived) {
  196.         case "SkinB":
  197.             shader = new SkinB(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4], ddsList[5], ddsList[6], ddsList[7]);
  198.             break;
  199.         case "HairC":
  200.             shader = new HairC(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
  201.             break;
  202.         case "Eye":
  203.             shader = new Eye(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
  204.             break;
  205.         case "Garment":
  206.             shader = new Garment(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
  207.             break;
  208.         case "GarmentScrolling":
  209.             shader = new GarmentScrolling(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
  210.             break;
  211.     }
  212.     if (shader) {
  213.         var threeMesh = new THREE.Mesh(bufferGeometry, shader.material);
  214.         var depthMesh = new THREE.Mesh(bufferGeometry)
  215.         parsedGR2s.push(threeMesh);
  216.  
  217.         scene.add(depthMesh);
  218.         //postScene.add(threeMesh);
  219.     }
  220.     if (shouldRemoveLoad) {
  221.         postScene.add(plane);
  222.         initCanvas();
  223.     }
  224. }
  225.  
  226. export class SkinB {
  227.     constructor(materialInfo, diffuseMap, rotationMap, glossMap, paletteMap, paletteMaskMap, ageMap, complexionMap, facePaintMap){
  228.         let hasComplexion, hasAge, hasFP;
  229.         if (ageMap) {
  230.             hasAge = true;
  231.         }
  232.         if (facePaintMap) {
  233.             hasFP = true;
  234.         }
  235.         if (complexionMap) {
  236.             hasComplexion = true;
  237.         }
  238.  
  239.         //materialInfo.color.push(materialInfo.palette1[3]);
  240.  
  241.         var uniforms = {
  242.             depthTexture: {value: null},
  243.             lightProjectionMatrix: {value: materialInfo.lightProjectionMatrix},
  244.             lightProjectionMatrixInverse: {value: materialInfo.lightProjectionMatrixInverse},
  245.             lightIntensity: {value: materialInfo.lightIntensity},
  246.             lightPos: {value: materialInfo.lightPos},
  247.             lightColor: {value: materialInfo.lightColor},
  248.             derived: {value: 11},
  249.             hasDiffuse: {value: true},
  250.             hasRotation: {value: true},
  251.             hasGloss: {value: true},
  252.             hasBlueGlow: {value: false},
  253.             diffuseMapSampler: {value: diffuseMap},
  254.             rotationMap1Sampler: {value: rotationMap},
  255.             glossMapSampler: {value: glossMap},
  256.             hasCompl: {value: hasComplexion},
  257.             hasFacepaint: {value: hasFP},
  258.             hasAge: {value: hasAge},
  259.             complexionSampler: {value: complexionMap},
  260.             facepaintSampler: {value: facePaintMap},
  261.             ageSampler: {value: ageMap},
  262.             hasPalette: {value: true},
  263.             hasPaletteMask: {value: true},
  264.             paletteMapSampler: {value: paletteMap},
  265.             paletteMaskMapSampler: {value: paletteMaskMap},
  266.             palette1: {value: materialInfo.palette1},
  267.             palette2: {value: materialInfo.palette2},
  268.             palette1Specular: {value: materialInfo.palette1Specular},
  269.             palette2Specular: {value: materialInfo.palette2Specular},
  270.             palette1MetallicSpecular: {value: materialInfo.palette1MetallicSpecular},
  271.             palette2MetallicSpecular: {value: materialInfo.palette2MetallicSpecular},
  272.             fleshBrightness: {value: materialInfo.fleshBrightness},
  273.             flushTone: {value: materialInfo.flush},
  274.             hasAnimatedTexture1: {value: false},
  275.             animatedTexture1Sampler: {value: null},
  276.             hasAnimatedTexture2: {value: null},
  277.             animatedTexture2Sampler: {value: null},
  278.             hasFresnelGradient: {value: null},
  279.             fresnelGradientSampler: {value: null},
  280.             animTexTint0: {value: null},
  281.             animTexTint1: {value: null},
  282.             animTexTint2: {value: null},
  283.             animFresnelHue0: {value: null},
  284.             animFresnelHue1: {value: null}
  285.         };
  286.  
  287.         this.material = new THREE.ShaderMaterial( {
  288.             uniforms: uniforms,
  289.             vertexShader: vertShaderText,
  290.             fragmentShader: skinBFrag
  291.         } );
  292.     }    
  293. }
  294.  
  295. export async function displayCharacter(CharacterValues){
  296.     clearObjFromScene();
  297.     parsedGR2s = [];
  298.     customObjectList = [];
  299.     var skinMatsDataIDX = CharacterValues.findIndex((val) => val.slotName == "skinMats");
  300.     var skinMatsData = CharacterValues[skinMatsDataIDX];
  301.     CharacterValues.splice(skinMatsDataIDX, 1);
  302.  
  303.     const NUM_MODELS = CharacterValues.length;
  304.     let curModelIdx = 1;
  305.  
  306.     CharacterValues.forEach((e) => {
  307.         var gr2s = e.modelPaths;
  308.         var matInfo = e.materialInfo;
  309.         var bufferGeometries = [];
  310.         var secondaries = [];
  311.  
  312.         for (let i = 0; i < gr2s.length; i++){
  313.             var gr2 = gr2s[i];
  314.    
  315.             loader.load(
  316.                 // resource URL
  317.                 gr2,
  318.            
  319.                 // onLoad callback
  320.                 function (data) {
  321.                     // output the text to the console
  322.                     var parsedCustomObj = loadGR2(data, gr2, e.slotName);
  323.                     parsedCustomObj.threeGeometries.forEach((elem) => {
  324.                         if (elem.pieceOne) {
  325.                             bufferGeometries.push(elem.pieceOne);
  326.                             secondaries.push(elem.pieceTwo);
  327.                         } else {
  328.                             bufferGeometries.push(elem);
  329.                         }
  330.                     })
  331.                     customObjectList.push(parsedCustomObj);
  332.                     if (i + 1 == gr2s.length) {
  333.                         var combinedGeometry = BufferGeometryUtils.mergeBufferGeometries(bufferGeometries, false);
  334.                         loadMaterial(matInfo, combinedGeometry, ((secondaries.length == 0) && (curModelIdx == NUM_MODELS)));
  335.  
  336.                         if (secondaries.length != 0) {
  337.                             var combinedSecondaries = BufferGeometryUtils.mergeBufferGeometries(secondaries, false);
  338.                             if (matInfo.slotName == "head") {
  339.                                 loadMaterial(matInfo.eyeMatInfo, combinedSecondaries, (curModelIdx == NUM_MODELS));
  340.                             } else {
  341.                                 var mat = getMatFromString(skinMatsData, matInfo.slotName);
  342.                                 loadMaterial(mat, combinedSecondaries, (curModelIdx == NUM_MODELS));
  343.                             }
  344.                         }
  345.                         curModelIdx++;
  346.                     }
  347.                 },
  348.            
  349.                 // onProgress callback
  350.                 function (xhr) {
  351.                     console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  352.                 },
  353.            
  354.                 // onError callback
  355.                 function (err) {
  356.                     showSnackBar(err);
  357.                 }
  358.             );
  359.         }
  360.  
  361.         if (gr2s.length == 0) {
  362.             curModelIdx++;
  363.         }
  364.     });
  365. }
  366.  
  367. function loadGR2(buffer, path, slotName){
  368.     //.. code to load GR2 models is here
  369. }
  370.  
  371. //load Materials
  372. function loadMaterial(matInfo, bufferGeometry, shouldRemoveLoad) {
  373.     var ddsTextures = [];
  374.     var length = matInfo.listOfMaps.length;
  375.     for (let i = 0; i < matInfo.listOfMaps.length; i++) {
  376.         var path = matInfo.listOfMaps[i];
  377.         if (path) {
  378.             if (path.substring(path.length - 4) != ".dds") {
  379.                 path = path + ".dds";
  380.             }
  381.             ddsLoader.load(
  382.                  path,
  383.    
  384.                 function (tex) {
  385.                     ddsTextures.push({
  386.                         index: i,
  387.                         texture: tex
  388.                     });
  389.                     if (ddsTextures.length == length) {
  390.                         var arrangedTextures = fixOrder(ddsTextures);
  391.                         createMaterial(matInfo, arrangedTextures, bufferGeometry, shouldRemoveLoad);
  392.                     }
  393.                 },
  394.    
  395.                 function (onProgress) {
  396.    
  397.                 },
  398.    
  399.                 function (error) {
  400.                     showSnackBar(error);
  401.                 }
  402.             );
  403.         } else {
  404.             length--;
  405.         }
  406.     }
  407. }
  408. function fixOrder(textureObjList) {
  409.     var toRe = [];
  410.     var sortedList = textureObjList.sort((a, b) => {
  411.         return a.index - b.index;
  412.     });
  413.     sortedList.forEach((obj) => {
  414.         toRe.push(obj.texture);
  415.     });
  416.     return toRe;
  417. }
  418.  
  419. //functions
  420. function clearObjFromScene() {
  421.     parsedGR2s.forEach((object) => {
  422.         postScene.remove(object);
  423.         object.geometry.dispose();
  424.         if (object.material) {
  425.             object.material.dispose();
  426.             object.material = undefined;
  427.         }
  428.     });
  429. }
  430.  
  431. function initCanvas() {
  432.     modelCanvasContainer.style.display = "flex";
  433.     loaderContainer.style.display = "none";
  434.     animate();
  435. }
  436.  
  437. //animation funcs
  438. function animate() {
  439.     renderer.clear(true, true, true);
  440.     requestAnimationFrame(animate);
  441.    
  442.     // render scene into target
  443.     renderer.setRenderTarget( target );
  444.     renderer.render( scene, camera );
  445.  
  446.     plane.material.depthMap = target.depthTexture;
  447.  
  448.     // render post FX
  449.     parsedGR2s.forEach((elem) => {
  450.         elem.material.uniforms.depthTexture.value = target.depthTexture;
  451.     });
  452.    
  453.     renderer.setRenderTarget( null );
  454.     renderer.render( postScene, postCamera );
  455.  
  456.     update();
  457. }
  458.  
  459. if (WEBGL.isWebGLAvailable()) {
  460.  
  461.     // Initiate function or other initializations here
  462.     init();
  463.  
  464. } else {
  465.  
  466.     const warning = WEBGL.getWebGLErrorMessage();
  467.     showSnackBar(warning);
  468.  
  469. }
RAW Paste Data Copied