What do you mean by this?
Do you mean having a camera and rendering a scene according to it’s position and orientation? Because all that’s possible with CanvasDraw.
CanvasDraw is pretty well built for this sort of stuff.
It also depends on how you render your scene and what that scene is. I find it easier to render top-down 2D maps and project them to the screen with pseudo 3D methods.
But you do need some knowledge on this sort of stuff. There heaps of videos and tutorials online that are easy to follow and learn for basic computer graphics by using nothing but a canvas system.
CanvasDraw also has a lot of functions that lets you create scenes much easier.
This update consists of some optimisations to the drawing side of things and some new functions!
New function: SetPixel() - The performant version of DrawPixel()
This function behaves similarly to DrawPixel() , all though main difference being is that this a much more performant method for colouring a pixel to the screen as it avoids constructing a vector and avoids checks to the canvas. So this function assumes your X and Y values are already whole numbers and are within the canvas.
If you are not doing high-resolution real-time rendering, then the DrawPixel() function will work just fine in most cases, and is in-fact, much more recommended as it it already pretty performant and consists of safe checks to ensure you don’t have problems when colouring a pixel on canvas.
This function is only recommended if you are having performance issues from creating lots and lots of pixels with high resolutions, or you have guaranteed coordinates for pixels and checks are never necessary for the canvas.
-- Creates a red pixel at point 25, 25
CanvasDraw.SetPixel(25, 25, Color3.new(1, 0, 0))
New function: GetPointFromMouse()
This function allows you get a point on the canvas from the client’s mouse!
This functions gives you heaps of possibilities for cool things such as drawing programs!
NOTE: This function only works on the client or locally. If you are using this function from the server, it will throw a warning in the console/output.
This function will also only work for GUIs. Currently, this will not work for SurfaceGuis as this function assumes everything is in screen space.
-- Get the mouses point on the canvas and draws a pixel.
local Point = CanvasDraw.GetPointFromMouse()
if Point then
CanvasDraw.DrawPixel(Point, Color3.new(1, 0, 0))
print("Red pixel drawn!")
else
print("The mouse is not the within the canvas!")
end
Optimised some of the pixel functions
Some of the drawing and fetch functions for CanvasDraw has been optimised to further allow maximum performance.
Here’s a list of them of the functions that have been optimised:
GetPointFromMouse? SurfaceGuis? Damn i would love to add that, but i have already gotten sick of trying to get the transformations for the mouse coordinates to work, let alone project the thing.
But if you have ideas on how i can do this simply and efficiently, please let me know. Cause i have no clue how to do this
This transforms a 2d position on a surface gui to a 3d point
function guiPointToWorld(gui, point)
local adornee = assert(gui.Adornee)
local normalizedPoint = point/gui.AbsoluteSize
local dir = Vector3.FromNormalId(gui.Face)
local projY = math.abs(dir.z + dir.x)
local projZ = dir.x + math.abs(dir.y)
local origin = Vector3.new(
dir.x - dir.y - dir.z,
dir.y + projY,
dir.z + projZ)*0.5
local surfX = Vector3.new(dir.z, 0, -projZ)*normalizedPoint.x
local surfY = Vector3.new(dir.y, -projY, 0)*normalizedPoint.y
local pos = origin + surfX + surfY
return adornee.CFrame*(adornee.Size*pos)
end
Do that conversion for the 4 corners, a,b,c,d, and using those push 4 more relative to the canvas’s normal. You essentially have a cube now and then from there you just do a point-in-box test for the mouses hit. If it is inside you can then just transform the coordinate space by mapping it from world space to basis vectors AB and AC (look up lookAt matrices). Your point should now be a 2d point with values from 0 to 1
The CanvasDraw Image Importer plugin has been updated. You can now mass import images from your computer. This means you can now select and import more than one image when the plugin prompts images from your computer to create multiple image save objects at once!
I have managed to easily create GIFs thanks to the mass import update:
Yeah, when you import the images, just select an instance or a folder or something in the explorer of where you want all the SaveObjects to be parented to.
hol up, wait a minute. Did this dude just made a brand new way to efficiently make a GIF/Video in roblox? Thats just insane, CanvasDraw at this point is the most useful module for rendering 3D models, Images and Videos in roblox to date. Even I am too impressed that i am also very excited to use this module in most of my projects.
But btw, Isnt it better to bypass the rendering problem of too many gui objects by simply using RichText? With as you can actually put in multiple pixel colors in 1 textlabel doing so.
This will probs allow for higher resolutions like 512x512 or even 720x1280.
You can get a lot higher resolution and videos to the point where they last for minutes at a time by using this method + texture atlasing. The real gem is trying to figure out the best way to store them so that you can have them be in datastore.
Over my research the past year I found that a mix of bit packing, base64 encoding, as well as serialization, was the best way to make the storage small for RGB images. There is a better way than RichText, and it is to take advantage of caching. For GUIs you’d just use something like a lookup table for the colors whereas if you wanted to take the parts approach, you layout in your world a pallet of color cubes then change their CFrame on call (by using a CFrame cache). There are problems with both methods, GUIs can only go so high as they are inefficient as you’ll need to create constant UIGradients whereas with parts it is very efficient in terms of CPU usage, but you will use loads of memory with the sheer amount of parts in the cache.
That is why there are basically two methods for images for stuff like art games in Roblox, and because most users want it for an art game, where they can extrapolate it to a surface GUI and still run for mobile users, it is why most people tend to use the UIGradient exploit.
Yep. I sure did. Image processing on this has been around for a month and a bit now, but I honestly don’t think anyone even knows that it existed. half of the capabilities of this module isn’t even know! Maybe my thread on this thing doesn’t say or show enough.
I honestly don’t think it will make that big of a difference in performance since we are still colouring different parts of the ui objects. If anything, and honestly, I believe the rendering process for richtext colours is probably more expensive than just changing frame colours or UI gradients which are probably less expensive in rendering.
I hate to say it, but we will most likely never be getting any real time rendering for any custom canvas with a resolution that high. I would like to point out that the main performance problems are the pixel calculations. Not the actual frames with gradients.
Wow, now that’s a high quality image for CanvasDraw
Now secondly, the actual method for storing pixel data of images on SaveObjects has been heavily optimised thanks to string compression methods.
Before, SaveObjects used to be able to get as big as 120KB!! Now that’s a really big file size for an instance in your game. But now, SaveObjects have become 80-95% smaller!
Now you can have as many SaveObjects in your place as you want without having to worry about file size!
WARNING:
If you are using SaveObjects in your place that were made before this update, then you will need to delete them and re-import new SaveObjects as the old SaveObjects will not work with CanvasDraw 2.3.0 and above.
You will also need to update the CanvasDraw Image Importer plugin as well.
huh i realized loading a 1 minute video that has a 144p resolution takes a long time to load into roblox for some reason… I wish it was a bit… faster… If i remember correctly, it took longer than 30 minutes to load in the video.
Oh i do not recommend whole videos. Firstly it will take awhile to do import hundreds of PNGs at that high of a resolution. Also you will start to experience some framerate drop when doing videos more than 128p.
Aside from that, i tried making it as fast as possible for importing images without causing lag.
Honestly 90p to 128p is my best preferred resolution, but it’s the frame count i like to keep below 100. Also I try to keep the framerate for videos at around 30 FPS or less. Cause simply switching pictures with larger resolution causes slight lag. But it pretty minimal and is overall pretty optimised
Fixed circle not filling with the fill parameter set to true in the DrawCircle() function
This update contains a fix for a bug for the DrawCircle() function that was caused by an update that changed the way how pixels were represented.
In versions 2.0.0 to 2.3.0, the fill parameter for DrawCircle() did not work at all, which will always an outline circle when ever drawn. Thankfully this has been fixed!
CanvasDraw.DrawCircle(
Vector2.new(50, 50), -- The point on the canvas where you want to place the circle
5, -- The radius of the circle in pixels
Color3.new(1, 0, 0), -- The colour for the circle (red in this case)
true -- Fill the shape (now works again :D)
)
