Extra whitespace breaks obj parsing

The .obj file format is documented at http://www.martinreddy.net/gfx/3d/OBJ.spec. Although this is not stated explicitly, examples there indicate that multiple consecutive spaces should be considered equivalent to a single space, and tools that I am using produce obj files with multiple spaces that are accepted by other obj-parsers. However, Babylon rejects them. The culprit seems to be the regexps facePattern1 to facePattern5 in objLoader.ts. The code below consists of files obj_example.html, single_space.obj and double_space.obj. The obj_example.html file loads single_space.obj and displays a white triangle as expected. However, if you change it to load double_space.obj instead, then no triangle is shown, and the Javascript console reports as follows:

Babylon.js v4.1.0-alpha.15 - WebGL2 - Parallel shader compilation
objFileLoader.ts:1053 Unhandled expression at line : f 1 2 3

The regexp tester at https://regex101.com/ agrees that “f 1 2 3” (with double spaces) does not match facePattern1 = /f\s+(([\d]{1,}[\s]?){3,})+/ but it would match if “?” were changed to “*”. I have not checked whether that would break anything else.

obj_example.html:

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>OBJ example</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
        var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        var createScene = function () {

            // Create the scene space
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera(
              "Camera",0,0,5, new BABYLON.Vector3(0,0,0), scene);
            camera.attachControl(canvas, true);

            // Add lights to the scene
            var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);

            BABYLON.SceneLoader.Append("./obj/","double_space.obj",scene,function(scene) {});
            return scene;
        };

        var scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () { 
                scene.render();
        });
    </script>
   </body>
</html>

single_space.obj:
v 1 0 0
v 0 1 0
v 0 0 1
f 1 2 3

double_space.obj
v 1 0 0
v 0 1 0
v 0 0 1
f 1 2 3

Hey and welcome!

Fancy doing a PR? That would be very nice :slight_smile:

I think it would be better if the PR was done by someone who has actual understanding of the codebase and is set up to run the unit tests. I have not looked at anything outside the few lines mentioned in my report, and I do not have a proper development environment for a library like this.

We have a Doc for people wanting to contribute:
https://doc.babylonjs.com/how_to/how_to_start

But anyhow can you provide a obj file that has the issue?

There is an obj file with the issue at the foot of my original post, as follows:
v 1 0 0
v 0 1 0
v 0 0 1
f 1 2 3
The key point is that the last line has double spaces.

perfect! Will be fixed by next nightly