Blotter Text not working correctly, is anything outdated?

[wwwisie]

Im trying to render a text with a "RollingDistortMaterial" material.

In my computer it works correctly, without any issues or warnings:

This is the code:

    let fontContainer = document.querySelector("#blotter-text")
    let fullText = fontContainer.innerText.toUpperCase()
    fontContainer.innerText = "";

    fullText = fullText.split(" ")
    fullText.forEach(function (e) {
        convertToBlotter(e)
    })

    function convertToBlotter(word) {
        let text = new Blotter.Text(word, {
            family: "Media Sans Extended",
            size: 66.5,
            needsUpdate: true,
            fill: "#FFFFFF",
            leading: "1",
            paddingLeft: 10,
            paddingRight: 10
        });

        let material = new Blotter.RollingDistortMaterial();

        let blotter = new Blotter(material, { 
            texts: text 
        });

        blotter.needsUpdate = true;
        let scope = blotter.forText(text);

        scope.appendTo(fontContainer);
    }

But in other computers it gets this errors and warnings,
am i doing anything wrong? is anything outdated?

[bradley]

Hmm that error does not look familiar.

Id suggest trying this though:

const fontContainer = document.querySelector("#blotter-text");
const containerTexts = fontContainer.innerText.toUpperCase().split(" ");
// Clear container.
fontContainer.innerText = "";

const material = new Blotter.RollingDistortMaterial();
const blotterTexts = containerTexts.map(function(text) {
    return new Blotter.Text(text, {
        family: "Media Sans Extended",
        size: 66.5,
        needsUpdate: true,
        fill: "#FFFFFF",
        leading: "1",
        paddingLeft: 10,
        paddingRight: 10
    });
});

const blotter = new Blotter(material, {
    texts: blotterTexts
});

// Append Blotter Texts back into container.
blotterTexts.forEach(function(text) {
    const scope = blotter.forText(text);
    scope.appendTo(fontContainer);
});

[wwwisie]

ohh ok, thank you for the code, although it didn't solve the other problem, it is better that way.

I'm thinking maybe that my other computer is missing some graphics driver (?)

[bradley]

It's possible. If it is only failing to work on one computer maybe just try restarting. Sometimes computers have graphics issues. Try other webGL sites and see if they work? http://blotter.js.org work?

[wwwisie]

Yes, it renders correctly, and it still interactive.
i'm still trying to figure out why its not working.

[bradley]

Are you maybe able to recreate this on a JSFiddle/Codepen?

[wwwisie]

I just made this Codepen and it is rendering correctly in the computer im having trouble with.
Now im guessing maybe there's something wrong with the rendering of the font im using in my current project, im going to test out some other fonts and see if thats the problem, im currently using Base64 for my fonts.

I'll keep you posted.
https://codepen.io/wwwisie/pen/aemmrO

[bradley]

@wwwisie any update on this?

[wwwisie]

I tried everything to fix it on that computer, but my page/code seems to be working fine on any other device. I'm thinking it has to be something about the video card driver or something on that computer specifically. I don't think it has something to do with blotter itself.
Thank you for your help :)

[wwwisie]

I just found the problem with my code! 🎉

Inside rollingDistortMaterial.js I edited some of the values from the return / inside the init() function.
The uRotation value cannot be equal to 180.0 or absolute 0, when you set that value to that angle it renders the output wrong. That is why it could run correctly inside the codepen, in that code i used a rawgit from your original javascript material.

FIX
For my page I wanted the rotation angle to be horizontal so I setted the value to 0.1 and it worked just fine. Here are some screenshots of the edited code before and after:

Before

After

[bradley]

Hmm that's interesting. Not sure why setting it to 180.0 or to 0.0 would cause any issues, but glad you got something youre happy with at least.

Im going to close this. If someone has similar issues in the future please comment or re-open.