Sign in to follow this  
UeliUeli

gltf loader in Baylon js (Blender 2.8)

Recommended Posts

Hi there

I downloaded Blender 2.8 with the new GLTF exporter. Now i'm stuck and my babylon.js script won't open the 3d model anymore. If i drop the model in the three.js viewer it looks fine, an old model made with blender 2.79 works fine also in babylon.js but the new GLTF (separate) does not.

 

Quote

function MyLoadingScreen( /* variables needed, for example:*/ text) {
  //init the loader
  this.loadingUIText = text;
}
MyLoadingScreen.prototype.displayLoadingUI = function() {
$(".strtbttn").text("loading...");
};
MyLoadingScreen.prototype.hideLoadingUI = function() {
  $(".strtbttn").remove();
};


//define links to gltfs!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

var x1 = "./textures/"
var x2 = "./mobiletextures/"
////  it would be nice to make them both relative to the files direction!

var x4 = "test_glTF.gltf"
////  maybe we should always give the models the same name! 

var x5 = "test, 2019"
document.getElementById('modelname').innerHTML = String(x5);

// hide the tools bar befor start
$(".tools").hide();

    //jquery function - was macht das???
$(document).ready(function(){
  
    //button 1: text weg & lader starten
$("#btn1").click(function(){
$(".instr").remove();
  //$("txt").remove();
 // $(this).remove();
  
$(".tools").show();


        var canvas = document.getElementById("canvas");
        var engine = new BABYLON.Engine(canvas, true,  { preserveDrawingBuffer: true, stencil: true }, true );

        var loadingScreen = new MyLoadingScreen("I'm loading!!");
        engine.loadingScreen = loadingScreen;

        /// PRESETTINGS / NO OFFLINE SUPPORT  

                  engine.enableOfflineSupport = false;


                  document.oncontextmenu = function() { return false };


/////////       CREATE SCENE      ////////////////////////////////////////////////////


              var scene = new BABYLON.Scene(engine);

              //engine.setHardwareScalingLevel(0.5);

              /// DEBUG LAYER - obtional 

              //scene.debugLayer.show();

                /// MANIPULATE ALL MESHES THAT ARE IMPORTED
/// COLLISION

              scene.collisionsEnabled = true;

              /// GRAVITY

              scene.gravity = new BABYLON.Vector3(0, -1.81, 0);

              /// LOOK


                scene.createDefaultCameraOrLight(true, true, true);

                 scene.clearColor = new BABYLON.Color3(30, 40, 255);

             scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
              
             //scene.clearColor = new BABYLON.Color3(30, 40, 255);

             //scene.ambientColor = new BABYLON.Color3(0.5, 0.5, 0.5);


              /// Antialising, Glow, sharpening usw would be nice... 

              scene.onNewMaterialAddedObservable.add(function(mat) {
              mat.backFaceCulling = false;
              mat.unlit = true;
              });

/////////       LOAD GLTF FILE      ////////////////////////////////////////////////////

              // check if mobile or desctop computer

              var isMobile = {
                Android: function() {return navigator.userAgent.match(/Android/i);},
                BlackBerry: function() {return navigator.userAgent.match(/BlackBerry/i);},
                iOS: function() {return navigator.userAgent.match(/iPhone|iPad|iPod/i);},                    
                Opera: function() {return navigator.userAgent.match(/Opera Mini/i);},                    
                Windows: function() {return navigator.userAgent.match(/IEMobile/i);},                   
                any: function() {return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());                    }                };


              if( isMobile.any() ){ var x3 = x2;
              }
              else { var x3 = x1;
              }


              BABYLON.SceneLoader.loggingLevel = BABYLON.SceneLoader.DETAILED_LOGGING;
              BABYLON.SceneLoader.Append(String(x3), String(x4), scene, function (scene) {


            

                //modell = newMeshes[0];
                    //modell.layerMask = 1;

                for(var i=0; i<scene.meshes.length; i++)    scene.meshes.checkCollisions=true;


                ///check size
 

 

Here's the console of the chrome browser:

 

Quote

Babylon.js v4.1.0-alpha.1 - WebGL2
babylon.js:16 BJS - [17:59:50]: Unable to compile effect:
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Uniforms:  world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vAlbedoColor, vReflectivityColor, vEmissiveColor, visibility, vReflectionColor, vFogInfos, vFogColor, pointSize, vAlbedoInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vReflectionPosition, vReflectionSize, vEmissiveInfos, vReflectivityInfos, vMicroSurfaceSamplerInfos, vBumpInfos, vLightmapInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, albedoMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, reflectivityMatrix, normalMatrix, microSurfaceSamplerMatrix, bumpMatrix, lightmapMatrix, vLightingIntensity, logarithmicDepthConstant, vSphericalX, vSphericalY, vSphericalZ, vSphericalXX_ZZ, vSphericalYY_ZZ, vSphericalZZ, vSphericalXY, vSphericalYZ, vSphericalZX, vSphericalL00, vSphericalL1_1, vSphericalL10, vSphericalL11, vSphericalL2_2, vSphericalL2_1, vSphericalL20, vSphericalL21, vSphericalL22, vReflectionMicrosurfaceInfos, vTangentSpaceParams, boneTextureWidth, vDebugMode, vDiffusionDistance, vTintColor, vSubSurfaceIntensity, vRefractionMicrosurfaceInfos, vRefractionInfos, vThicknessInfos, vThicknessParam, refractionMatrix, thicknessMatrix, vClearCoatTangentSpaceParams, vClearCoatParams, vClearCoatRefractionParams, vClearCoatTintParams, clearCoatColorAtDistance, clearCoatMatrix, clearCoatBumpMatrix, clearCoatTintMatrix, vClearCoatInfos, vClearCoatBumpInfos, vClearCoatTintInfos, vAnisotropy, vAnisotropyInfos, anisotropyMatrix, vSheenColor, vSheenInfos, sheenMatrix, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, albedoSampler, reflectivitySampler, ambientSampler, emissiveSampler, bumpSampler, lightmapSampler, opacitySampler, reflectionSampler, reflectionSamplerLow, reflectionSamplerHigh, microSurfaceSampler, environmentBrdfSampler, boneSampler, thicknessSampler, refractionSampler, refractionSamplerLow, refractionSamplerHigh, clearCoatSampler, clearCoatBumpSampler, clearCoatTintSampler, anisotropySampler, sheenSampler, shadowSampler0, depthSampler0
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Attributes:  position, normal, uv
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Error: Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vAlbedoUV
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Trying next fallback.
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Unable to compile effect:
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Uniforms:  world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vAlbedoColor, vReflectivityColor, vEmissiveColor, visibility, vReflectionColor, vFogInfos, vFogColor, pointSize, vAlbedoInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vReflectionPosition, vReflectionSize, vEmissiveInfos, vReflectivityInfos, vMicroSurfaceSamplerInfos, vBumpInfos, vLightmapInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, albedoMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, reflectivityMatrix, normalMatrix, microSurfaceSamplerMatrix, bumpMatrix, lightmapMatrix, vLightingIntensity, logarithmicDepthConstant, vSphericalX, vSphericalY, vSphericalZ, vSphericalXX_ZZ, vSphericalYY_ZZ, vSphericalZZ, vSphericalXY, vSphericalYZ, vSphericalZX, vSphericalL00, vSphericalL1_1, vSphericalL10, vSphericalL11, vSphericalL2_2, vSphericalL2_1, vSphericalL20, vSphericalL21, vSphericalL22, vReflectionMicrosurfaceInfos, vTangentSpaceParams, boneTextureWidth, vDebugMode, vDiffusionDistance, vTintColor, vSubSurfaceIntensity, vRefractionMicrosurfaceInfos, vRefractionInfos, vThicknessInfos, vThicknessParam, refractionMatrix, thicknessMatrix, vClearCoatTangentSpaceParams, vClearCoatParams, vClearCoatRefractionParams, vClearCoatTintParams, clearCoatColorAtDistance, clearCoatMatrix, clearCoatBumpMatrix, clearCoatTintMatrix, vClearCoatInfos, vClearCoatBumpInfos, vClearCoatTintInfos, vAnisotropy, vAnisotropyInfos, anisotropyMatrix, vSheenColor, vSheenInfos, sheenMatrix, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, albedoSampler, reflectivitySampler, ambientSampler, emissiveSampler, bumpSampler, lightmapSampler, opacitySampler, reflectionSampler, reflectionSamplerLow, reflectionSamplerHigh, microSurfaceSampler, environmentBrdfSampler, boneSampler, thicknessSampler, refractionSampler, refractionSamplerLow, refractionSamplerHigh, clearCoatSampler, clearCoatBumpSampler, clearCoatTintSampler, anisotropySampler, sheenSampler, shadowSampler0, depthSampler0
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Attributes:  position, normal, uv
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Error: Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vAlbedoUV
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Trying next fallback.
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Unable to compile effect:
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Uniforms:  world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vAlbedoColor, vReflectivityColor, vEmissiveColor, visibility, vReflectionColor, vFogInfos, vFogColor, pointSize, vAlbedoInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vReflectionPosition, vReflectionSize, vEmissiveInfos, vReflectivityInfos, vMicroSurfaceSamplerInfos, vBumpInfos, vLightmapInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, albedoMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, reflectivityMatrix, normalMatrix, microSurfaceSamplerMatrix, bumpMatrix, lightmapMatrix, vLightingIntensity, logarithmicDepthConstant, vSphericalX, vSphericalY, vSphericalZ, vSphericalXX_ZZ, vSphericalYY_ZZ, vSphericalZZ, vSphericalXY, vSphericalYZ, vSphericalZX, vSphericalL00, vSphericalL1_1, vSphericalL10, vSphericalL11, vSphericalL2_2, vSphericalL2_1, vSphericalL20, vSphericalL21, vSphericalL22, vReflectionMicrosurfaceInfos, vTangentSpaceParams, boneTextureWidth, vDebugMode, vDiffusionDistance, vTintColor, vSubSurfaceIntensity, vRefractionMicrosurfaceInfos, vRefractionInfos, vThicknessInfos, vThicknessParam, refractionMatrix, thicknessMatrix, vClearCoatTangentSpaceParams, vClearCoatParams, vClearCoatRefractionParams, vClearCoatTintParams, clearCoatColorAtDistance, clearCoatMatrix, clearCoatBumpMatrix, clearCoatTintMatrix, vClearCoatInfos, vClearCoatBumpInfos, vClearCoatTintInfos, vAnisotropy, vAnisotropyInfos, anisotropyMatrix, vSheenColor, vSheenInfos, sheenMatrix, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, albedoSampler, reflectivitySampler, ambientSampler, emissiveSampler, bumpSampler, lightmapSampler, opacitySampler, reflectionSampler, reflectionSamplerLow, reflectionSamplerHigh, microSurfaceSampler, environmentBrdfSampler, boneSampler, thicknessSampler, refractionSampler, refractionSamplerLow, refractionSamplerHigh, clearCoatSampler, clearCoatBumpSampler, clearCoatTintSampler, anisotropySampler, sheenSampler, shadowSampler0, depthSampler0
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Attributes:  position, normal, uv
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [17:59:50]: Error: Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vAlbedoUV
e._ErrorEnabled @ babylon.js:16
babylon.js:16 WebGL: INVALID_OPERATION: useProgram: program not valid
e.setProgram @ babylon.js:16
babylon.js:16 Uncaught TypeError: Cannot read property '0' of undefined
    at e.getAttributeLocation (babylon.js:16)
    at e._bindVertexBuffersAttributes (babylon.js:16)
    at e.recordVertexArrayObject (babylon.js:16)
    at e._bind (babylon.js:16)
    at t._bind (babylon.js:16)
    at t.render (babylon.js:16)
    at t.render (babylon.js:16)
    at e.renderUnsorted (babylon.js:16)
    at e.render (babylon.js:16)
    at e.render (babylon.js:16)

 

Thank you

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.