Render semi-translucent cubes using WebGL
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want a simple Javascript script (put it on JSFiddle or similar) that renders colored cubes using WebGL. This is for project for my bootcamp students learning Javascript.

The code should take in a list as follows:

[ [0, 0, 0], [1, 1, 1], [2, 2, 5] ... ]

Each entry in the list represents a point in 3D space. The cubes should all have a constant size and if I input adjacent points like [0, 0, 0] and [0, 0, 1] then the two cubes should be touching each other.

Render them so that each cube is semi-translucent so you can kind of see the cubes behind it. You should be able to rotate and zoom using the mouse. The cubes should be translucent light blue in color. The background can just be black.

I am starting on $25 but I will tip an additional $50 (so $75 in total) for a complete solution. If no good solution is found after a week then I will probably let the bounty go to a good cause. If you make a good effort but the solution is incomplete I may tip if the code is useful for my students.

Since this is for my students to learn Javascript, I need the code to be really well structured and formatted and it should be under an open source license.

Must work on latest Chrome.

yes! perfect but they should all be cubes (some of those are not the same length in all dimensions) and they should all be the same color.
ramonza 25 days ago
awesome! I'll adapt the example to your requirements and I'll try put it to JSFiddle
drakmail 25 days ago
awarded to drakmail

Crowdsource coding tasks.

2 Solutions

Winning solution

Complete solution at JSFiddle:

The first line contains code to initialize objects:

const objects = [
  [0, 0, 0],
  [1, 1, 1],
  [2, 2, 5]

Here's another take on the task, this time using a modified version of the Voxel Painter by Mr.Doob:


Source Code

And, here is another project by Mr.Doob, which can be modified to display the 3D cubes along with a live HTML/CSS/JS editor, in case you are interested:

Live HTML 3D Editor

P.S. And, in case you are in the mood of sharing, I am also teaching JavaScript in several coding bootcamps, and would like to know more about the idea behind this project and/or share teaching experiences.

I can't get it to work. It keeps saying "please match the specified format" even though I am inputting it in the same format as the example.
ramonza 24 days ago
You are right. It wasn't expecting the SPACE character. It has been updated.
kostasx 23 days ago
View Timeline