[1.0.0] zGL - 3D GUI graphics library

Help and Feedback Creations Feedback
#1

Hey, it’s been a long while since I made anything on roblox, but I am back with something exciting to share.

3D GUIs have been dreamt of for a long time, but roblox lacked features to accomplish it. Main issue was that you couldn’t draw proper polygons. But thanks to GUI rotation, this is actually now possible…

[center]So I present you my on going project.[/center]

[center][size=6]zGL - 3D user interface[/size]

External Media

[/center]

About:
zGL is a graphics library, that provides ability to have 3D user interface. This project is still work in progress, but it has features that shine above other 3D libraries, mainly the polygon support.

Features:
[ul]
[li]Let’s you draw any basic primitive(dot, line, triangle, quad)[/li]
[li]Renders in real-time[/li]
[li]Supports ScreenGUIs and SurfaceGUIs[/li]
[li]Usable with roblox camera or custom camera[/li]
[li]Has basic shading[/li]
[li]Unlimited depth(thanks to magnalite)[/li]
[/ul]

Screencaps:

Basic dots(webm)

Lines:

External Media

Triangles(webm)
Triangles2 + Custom camera(webm)
Magic behind triangles:

External Media

Basic triangle shading(webm version):

External Media

Quads:

External Media

Makes a neat loading GUI:

External Media

Some final words:
This will be public library, but it has several things to work on, to make it complete. That includes few more features, bug fixes and cleaner code, so other coders can expand on it.

As this is not really ready to be released, I am not going to give it to public just yet, but if you feel like giving it a try, I’ve made a git-hub repository: https://github.com/zars15/zGL-robloxUI

Feel free to leave suggestions,
Thanks!

EDIT:
I should give the main post more attention. I’ve posted bit more details on updates in replies, but the status of this library is nearly complete. It can now do proper 3D scenes, but it still needs smarter depth sorting, since right now it simply takes average depth of triangle.
I’ll try to write descriptive readme tomorrow, so it’s simple to get it running.

Also, I just checked performance of it’s current state. Frames are little jumpy, but lowest I recorded was 51, but it tends to jump around 55-60 frames.

6 Likes
#2

a few things, mostly, make it to where you can have any color triangle, as opposed to a few preset colors

add shading based on relative normal (just simple shading, like adding black to trigs with norms against the sun will work)

vertex shading would be neat, but very complex. and I’m not even sure if it’s possible

triangle fans and triangle strips are a must for any mesh user

I made a .obj mesh importer, I would gladly edit it to work with your library, so that you can test how real meshes look in your interface, my importer is more complex than the average one in roblox, as it deals with the .mtl file’s coloring as well, although most of it’s complexity is in how it draws the actual mesh, I haven’t made it too abundantly complex in it’s loading stage.

#3

[quote] a few things, mostly, make it to where you can have any color triangle, as opposed to a few preset colors

add shading based on relative normal (just simple shading, like adding black to trigs with norms against the sun will work)

vertex shading would be neat, but very complex. and I’m not even sure if it’s possible

triangle fans and triangle strips are a must for any mesh user

I made a .obj mesh importer, I would gladly edit it to work with your library, so that you can test how real meshes look in your interface, my importer is more complex than the average one in roblox, as it deals with the .mtl file’s coloring as well, although most of it’s complexity is in how it draws the actual mesh, I haven’t made it too abundantly complex in it’s loading stage. [/quote]

It already supports any color, as I use 2 images of white triangles to create the polygon.

Will have the back shading put on to-do list.

Gonna check what are fans and strips about…
Ah, seems pretty simple to implement. Perhaps function, that takes table with vertices to connect.

I thought of loading meshes as well, so that would be interesting to see. As of now, the triangles have little pixel gap when connected with each other, so i gotta deal with that and I haven’t properly clamped triangles, when some vertices go behind camera.

#4

For polygons, you could merge large areas into quads and then have triangles to define the edges. I don’t know how effective that would be, but it sounds like it would work.

#5

Are you using small frames for the triangles? Then it won’t be of use.

#6

It only uses 2 image labels per triangle, so it has huge potentional.

1 Like
#7

the GPU cheats some, by being handed a vertex list, then being handed a triangle list, the triangles with intersecting edges it knows it can cover, so that’s ensured, past that, their fill algorithm is pretty accurate, so drawing on the exact same position will almost always yield a solid line as well, while you can’t really use a fill algorithm like they do, you can make the triangles a hair larger to simulate it (since it’s not as negative to overdraw, as it is to underdraw), or use the first implementation with a line draw algorithm, but it will cost more resources, so I would stay away from that, unless it’s needed

#8

Pretty cool stuff.

#9

[quote] (…)
add shading based on relative normal (just simple shading, like adding black to trigs with norms against the sun will work)
(…) [/quote]

Looks pretty great:

External Media

#10

looks like progress, Mind giving me your interface code so I can change my obj loader to work with your script, so you can use it for testing? I’d also love to see some meshes drawn with this, and not just some simple triangles <3

#11

This is what I used in attempt to draw a cube: Roblox library n shiz - Pastebin.com

But I ran into issue of lack of proper depth sorting[strike], and quads being rendered incorrectly[/strike](found the issue, so they work as expected now). But i guess that should be a good example.

On note of depth sorting, magnalite gave good advice of making list of GUIs and since newer GUIs will always be on top of the ones below them, this would work nicely.

#12

it’s probably a good idea for you to do depth sorting, anyway, as you can optimize much easier, and multiple scripts could all interact with your library at the same time

Edit: just going to write a function to automatically sort a scene table via ZDepth, the function will take a camera object, and a table to sort, feel free to include my finished function in your library for people to call.

#13

Alright, so this is a huge update. First of all, I got the zIndex problem solved using magnalite’s advice and now it has better scene support. I still haven’t bothered to write a readme, so I should get on that soon.

Even if I don’t have proper algorithm for depth sorting, it now can render cubes and pretty much any other mesh:

External Media

Currently the biggest issue is the way how roblox threats uploaded images.

External Media

I have some ideas how to bypass this issue, but other than that it works pretty great.

I also attempted to clip the vertices, if some go behind camera while others are visible. It still is faulty, not sure if that’s roblox’s fault or mine, but it doesn’t glitch out when you go past it.

Also added two new objects: triangleStrip and triangleFan. Both requires table with vertices and optional color. Triangle fan will use 1. vertice as center and rest of the vertices will be connected to each other and center. Triangle strip simply requires vertices, that will get connected in strip style.

It seems that I’ll be able to release this for public soon[strike], once I manage to bypass that dark edge bug[/strike](got rid of this bug. It still might persist, but minimally, unless I decide to eliminate it completely). Also I’ll probably will need to start optimizing the code, since it’s pretty functional now.

#14

behind camera clip is easy, dot product the camera’s lookVector to the vector from the camera to the poly, if it’s below zero, it’s behind the camera(also might wanna find the distance of the near clipping plane, and add that as your minimum instead of 0)

clipping for the sides of the camera is much, much harder, and Roblox doesn’t give you much good info

my obj loader supports transparency in objs, if you want to add that feature, it’d be nice :slight_smile:

#15

Got the libraries working (or should be working, can’t test it without your lib)

Mind testing it for me, and using it?

#16

[quote] Got the libraries working (or should be working, can’t test it without your lib)

Mind testing it for me, and using it? [/quote]

Ah, sorry, I am going now, but take the library from github page in first post. All you need is only the module, I managed to upload the triangle images without the black edge issue. Essentially you create scene and use insert method on it to insert 3D objects in it and then pass the scene to render function.

I hope the little interface change isn’t too big of issue to you, as it had to change for unlimited zIndex. Since it now has triangle strips and fans, I hope it makes it simpler.

1 Like
#17

I really don’t know how to use libraries and all from GitHub and such, but I’d love to use this.

#18

‘Temporar fix to triangle shading’, I sees a typoo

I updated my model, it now renders a spinning utah teapot, the first mesh to be ever rendered on zGL Muahahha I have made history!

#19

Make a script that outlines a character but only on the outside edges :3

#20

[quote] ‘Temporar fix to triangle shading’, I sees a typoo

I updated my model, it now renders a spinning utah teapot, the first mesh to be ever rendered on zGL Muahahha I have made history!

[spoiler]

[/spoiler] [/quote]

Damn, that’s actually pretty nice! How many polygons and how’s performance?