We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

create canvas texture

Home Forums Graphics / Maya create canvas texture

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #57031
    noname
    Participant

    I would like to draw a canvas to a surface of a cube object but im not that familiar with 3D textures. Is this possible?

    (black square replacing with canvas coded with javascript)
    https://v3d.net/c7o

    #57032
    kdv77kdv
    Participant

    It’s possible

    #57054
    noname
    Participant

    Wow this is awsome. I tried your code and it works. However after testing a little I was not able to manipulate the canvas after the initial setup.

    Lets say i want to clear the canvas and draw another Rect on it. Is that possible? My goal is to build like a little gameboy that runs with a html/javascript canvas and that you can also control with the real buttons on the 3d model.

    • This reply was modified 3 weeks, 3 days ago by noname.
    • This reply was modified 3 weeks, 3 days ago by noname.
    Attachments:
    You must be logged in to view attached files.
    #57060
    kdv77kdv
    Participant

    draw a new image and update the canvas texture again.

    #57065
    noname
    Participant

    This works. Thank you much, sir!

    #57265
    noname
    Participant

    Sorry for having to ask again here @kdv77kdv

    I was playing around with it but im not able to draw animations to the textures. Replacing the texture with a new static image is okay but how do I create an animation on it, using setInterval?

    #57267
    kdv77kdv
    Participant

    What kind of animation you’re trying to draw? A sequence of images or a video file?

    #57373
    noname
    Participant

    @kdv77kdv
    It’s more like a javaScript manipulated drawing.

    Example JsFiddle:
    https://jsfiddle.net/7mvq29xa/1/

    var canvas = document.getElementById("myCanvas");
        var c = canvas.getContext("2d");
        var startX = 50;
        var startY = 50;
        var endX = 100;
        var endY = 100;
        var amount = 0;
        setInterval(function() {
            amount += 0.05; 
            c.clearRect(0, 0, canvas.width, canvas.height);
            c.strokeStyle = "black";
            c.moveTo(startX, startY);
            c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
            c.stroke();
        }, 30);
    #57375
    kdv77kdv
    Participant

    do you update the canvas texture after every frame?

    #57434
    noname
    Participant

    Okay when using the setInterval as Puzzleblock and not in the Code-Block it seems to work doing animations.

    https://v3d.net/clp

    Attachments:
    You must be logged in to view attached files.
    #57436
    kdv77kdv
    Participant

    Replace texture every frame??? That’s a cruel solution ))) As I’ve said, you just need to update the canvas texture every frame.

    This script draws two videos to the canvas texture

    #57438
    noname
    Participant

    Ah yes thanks for the hint. Now it works like intended. Thanks a lot.

    https://v3d.net/clp

    Attachments:
    You must be logged in to view attached files.
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.