export 3d image to html

approxdecapproxdec Posts: 13Member

hello.
i would like to send an image [on a mesh] in 3D to an html5 export.
what i have tried so far has resulted in black screens.
so, in Blender, import image as plane [i note that planes are regarded as problematic in Godot
but i am trying to keep it simple] export as .obj and import to Godot.
set scene with a camera and a light, export to html5 from Godot.

but this is not working.

so how can i get it to work?

thanks

Comments

  • approxdecapproxdec Posts: 13Member

    i'm using a local webserver to display the html [127.0.0.1]
    other files are displaying fine from this server.

  • TwistedTwiglegTwistedTwigleg Posts: 1,677Admin
    edited August 18

    Are you trying to send an image to an already exported Godot HTML project? I don’t know if it is possible to load image files at runtime with the HTML export, but if it is possible, this page on the documentation might help.
    I have also written a proof-of-concept Godot plugin that can load resources while a game is running, though I have no idea if it works with HTML exports.

    If you are just trying to display an image on a plane, then I think Godot should be able to show an image on plane on a HTML exported project. I do not know how Godot’s 3D abilities are with HTML, but I’ve exported some 2D projects without any issues.

    If you export to HTML with debug enabled, do you get any errors on the Godot debug console and/or the web browser console?

    One thing that could be causing the black screen issue is WebGL compatibility with your browser. Projects exported with OpenGL 3 require WebGL 2 compatible browsers, while OpenGL 2 projects require WebGL 1 compatible browsers.

    Hopefully this helps!
    (Side note: Welcome to the forums!)

  • approxdecapproxdec Posts: 13Member

    thanks TwistedTwigleg
    i will review all of that.

  • approxdecapproxdec Posts: 13Member

    html export to 2d is indeed good
    but trying to do similar in 3d is the problem.
    maybe its the WebGL compatibility problem
    so i will look down that dark path.

  • approxdecapproxdec Posts: 13Member

    models.js:7 OpenGL ES 3.0 Renderer: WebKit WebGL
    models.js:7 ERROR: Texuture 'res://.import/po2.png-f1789ecf8485a22bcf8bd656a9c290b1.s3tc.stex' is compressed, has mipmaps but is not of powerf-of-2 size. This does not work on OpenGL ES 3.0.
    put_char @ models.js:7
    models.js:7 At: drivers/gles3/rasterizer_storage_gles3.cpp:757:texture_set_data() - Texuture 'res://.import/po2.png-f1789ecf8485a22bcf8bd656a9c290b1.s3tc.stex' is compressed, has mipmaps but is not of powerf-of-2 size. This does not work on OpenGL ES 3.0.
    put_char @ models.js:7
    4models.html:1 [.WebGL-000001F433B94050] GL_INVALID_OPERATION: Invalid compressed image size.
    models.html:1 [.WebGL-000001F433B94050] GL_INVALID_OPERATION: It is undefined behaviour to have a used but unbound uniform buffer.

  • approxdecapproxdec Posts: 13Member

    this seems like a look for a purple squirell
    more learning needed.

  • approxdecapproxdec Posts: 13Member

    aha! it seems to be a power of 2 image thing.
    a model with a 512x512 texture exports to html5
    and displays in the browser.
    the docs at Importing textures talks about this briefly
    and also discusses the 'Detect 3D' checkbox
    "settings are changed so the
    texture flags are friendlier to 3D (mipmaps, filter and repeat become
    enabled and compression is changed to VRAM)"
    but this does not happen for image.

  • TwistedTwiglegTwistedTwigleg Posts: 1,677Admin

    Ah, that makes sense. I totally forgot the power of 2 size requirements. Normally I use textures/images with a power of 2 without thinking about it, a habit formed by having issues like this in many different engines/frameworks.

    Does it work now?

  • approxdecapproxdec Posts: 13Member

    yes it does, as i described
    but the 'Detect 3D' checkbox does not give
    the docs described behaviour
    but not to worry
    from now on - power of 2 images :-)

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file