3D Pixel Art Generator

Resources Community Resources
#1

3D Pixel Art Generator

Hello! I have been creating a basic script that generates a 3D model from JSON data, pretty much it creates a lot of parts, and will color them and change the size depending on the data you enter. So you can get some cool stuff like this

Download: 3DPixelArt.rbxm (403.4 KB)
PLEASE CHECK THE SOLUTION FOR A WORKING HTML FILE

Mario

charmander
charmander1275×616 175 KB

Honestly, there is a lot of possibilities with this project, you’re not limited to 2D pixel art, you can have it create any image you want.

The system is good for any small images, you can do any image you want though. The downside to large images is they take a while to build out. I’m sure this could be optimized a lot. The Charmander image is 128x128 pixels, which is the largest I would use.

The image uses getImageData() in JS for all the data. To get data, use the HTML code I provided inside the main script.

I provided more instructions using comments inside that file as well, and if you get confused feel free to leave a comment.

The code behind this is actually fairly simple, it pretty much runs a loop for every part it creates, and finds an RGB value from the data, each part has 4 channels of color: R(red)G(green)B(blue)A(alpha), I did not use alpha much except for fully transparent pixels as I am lazy. But you can change the code of this if you want to get semi-transparent pixels. You can honestly manipulate this is any way you want. Each image requires a module, modules are fairly simple to make and I provided a template.

Module Template

local module = {}

module.depth = 1 

module.size = 32 

module.data = [[DATA HERE]] 


return module

Explanation:
module.depth is the size on the Z coordinate, increasing this will make an image longer and more “3D”

module.size is the width of the image, and height should be the same as width to make sure you have a square image.

module.data is where you will copy/paste the data the HTML file gave you. This is usually a super long line, due to the fact that that each image has a lot of information.

Each pixel gets 4 values

Data Sizes

8x8: 256 values

16x16: 1024 values

32x32: 4096 values

64x64: 16384 values

128x128: 65536 values

Anyway, I can’t think of anything else to say, feel free to ask any questions you want.

Download: 3DPixelArt.rbxm (403.4 KB)

45 Likes
#2

Wow, amazing creation! I’ll be sure to tinker around with this!

2 Likes
#3

image
image1173×897 15.4 KB

Is something suppose to be happening? Iv’e been waiting for about 15 minutes now, and nothing has changed.

Iv’e tried using Google Chrome, and Microsoft Edge.

<!DOCTYPE html>
<html>
<body>
<p id = 'p'>Loading Data...</p>
<img id="image" src="https://tr.rbxcdn.com/4051812eddae3a51fefe9013b352c1f8/420/420/Decal/Png">

<canvas id="myCanvas" width="36" height="36" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var paragraph = document.getElementById('p')
  var img = document.getElementById("image");
  c.width = img.width
  c.height = img.height
  img.crossOrigin="anonymous";
  ctx.drawImage(img, 0, 0);
  
  
  var imgData = ctx.getImageData(0, 0, c.width, c.height);

  

  ctx.putImageData(imgData, 0,0);
  
  var myJsonString = JSON.stringify(imgData);
  paragraph.textContent = myJsonString;
};
</script>

</body>
</html>

I also seem to get a HTML error:

image
image954×25 2.23 KB

4 Likes
#4

Same thing happens to me, tried firefox microsoft edge and chrome.

2 Likes
#5

Here is some fixed code

<!DOCTYPE html>
<html>
<body>
<p id = 'p'>Loading Data...</p>
<img id="image" src="https://tr.rbxcdn.com/4051812eddae3a51fefe9013b352c1f8/420/420/Decal/Png">

<canvas id="myCanvas" width="36" height="36" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("image").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var paragraph = document.getElementById('p')
  var img = document.getElementById("image");
  c.width = img.width
  c.height = img.height
  img.crossOrigin="anonymous";
  ctx.drawImage(img, 0, 0);
  
  
  var imgData = ctx.getImageData(0, 0, c.width, c.height);

  

  ctx.putImageData(imgData, 0,0);
  
  var myJsonString = JSON.stringify(imgData);
  paragraph.textContent = myJsonString;
};
</script>

</body>
</html>
2 Likes
#6

By the way, the canvas will automatically scale to the image size, I highly recommend you make sure your image sizes stay below 128x128 or at the absolute maximum 256x256 as it can and will take forever to build out. If you have any more questions let me know.

#7

Screen Shot 2020-11-06 at 2.38.18 PM
This is super cool! The examples in the project work great but I’m still having trouble with the HTML file that converts my own images.

The new solution posted returns a broken image and the data is all 0s. Tested on Mac, Chrome, Safari and Firefox.

#8

Works amazingly!
It was kinda difficult to get working at first, but it saved me hours of having to do this manually.

image used:
ezgif.com-webp-to-png
result:
image
It didn’t get the colors (It showed up as all black for some reason) so I had to color it manually. Otherwise it got the shape well enough.

3 Likes