iFrames in 2023, using editor version 1.61.3

I know that the support and updates of the iframe project are discontinued, however, there are still people who need it and use it, this little trick may help to solve “touch” issues using the phone and Chrome:

   if (this.iframeUrl) {
        element = document.createElement("div");
        //element.src = this.iframeUrl;
        element.style.border = '0px';
        //element.style.background = '#FFFFFF';
        element.style.zIndex = "1000000"; 
        frame = document.createElement("iframe");
        frame.style.width = "100%";
        frame.style.height = "100%";
        frame.src = "https://example.com/";
        element.appendChild(frame);
        //element.controls = true;
    }

However, I have one question, why is the render sometimes cut off on the phone? (On planes that are not perfectly square, eg 16:9 etc) And where to look for an answer? I am attaching an explanatory video

the original project doesn’t have this problem, maybe it’s something with my camera?

1 Like

Found out the cause in renderer.js:

        this._maxWidth = 1920;
this._maxHeight = 1920;

Setting it to 1080 fixes the issue, on both devices tested (pc and phone) it looks the same

        this._maxWidth = 1080;
this._maxHeight = 1080;

but I feel that this will not always be the case, is there some specific measurement from each “screen” that I could take and use on maxWidth and Height, hoping that everywhere the image will look similar?

This is pretty much the reason we’ve stopped supporting it as there are so many edge cases :frowning:

AFAIK, those values are constant so shouldn’t change from device to device unless pixel device ratio and scaling comes into effect on different devices.

I also wonder if it’s some weird clipping issue being applied here where the stencil is getting resized or blocked by something else?

Might be worth checking with Spectre.js to see if there are any rendering issues as well

You’re completely right, based on my further research it turns out max width and height isn’t the main cause, the whole problem lies in this.pixelsPerWorldUnit

I’m not skilled enough to understand what’s going on, but at the same time, reducing the pixel ratio also reduces clipping until the “ceiling” is reached and all problems disappear (at least on the devices I tested)

When I performed tests with the video element, default controls had a problem with width, even though the video was 100% long, the length of the controls changed depending on the viewing position (Chromium, Android)

Throwing: ResizeObserver loop limit exceeded

I think I found a solution to the problem, the “ceiling” method I mentioned stops working when you increase the plane scale, for example 15x5 may look great, but after setting the scale to 50x30, clipping still occurs (increases/decreases with scale), so I did this:

Before giving information to “render”
We calculate pixels per world according to the plane scale and predefined “base”.

        this.entity = entity;
        var modelTransform = this.entity.getWorldTransform();
        var scale = modelTransform.getScale();

        this.cameraElement = this._renderer.addCamera(camera);  
        this.cameraElement.appendChild(dom);

        this._maxWidth = 1920;
        this._maxHeight = 1080;

        this.base = 640;
        pixelsPerWorldUnit = pixelsPerWorldUnit || this._maxWidth;
        this.pixelsPerWorldUnit = new pc.Vec2(this.base / scale.x, this.base / scale.z);

        this._renderer.addTarget(this); 
        this._renderer.render();

increasing/decreasing this.base changes visible “resolution”

160x90, 10x6.5, 3x2, 1x0.8

IIRC, I had to use a rounding method because iOS didn’t like non-integer values :thinking:

1 Like

It’s bad that I don’t have a single iOs device lying around, it would be nice to check, I wonder if the emulators are capable of reproducing true experience?