gltf loader in Baylon js (Blender 2.8)

[UeliUeli]

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

[MarianG]

Hi @UeliUeli

If you didn't do it yet, please post your question here

https://forum.babylonjs.com