Prototyping challenge: Make a web-based 3D modeling toy
Posted by Lost Garden [HTML][XML][PERM][FULL] on 6 May 2012, 8:48 pm
I'm rather obsessed with user generated content, particularly art tools.  Recently, I had a wonderful experience with Realm of the Mad God.  Alex Carobus added in a simple pixel editor that allowed anyone to create sprites that might be used in the game.  Very rapidly, players created thousands of truly delightful pieces of art.

Inspired by this, I set a design challenge for myself.
  • 3D in a browsers. What is an easy-to-use 3D modeling tool that lives in the browser?
  • Unique style:  I want the output to be instantly recognizable as being created in this toy.  That means radically constraining the tools.  Instead, I was particularly inspired by the extruded 3D style of Land-a Panda. 

  • Minimalism: Are there any ways of simplifying 3D modeling? What is the pixel editor equivalent of a 3D modeling tool?
  • Professional results:  Can we build something where you look at the results and think "Wow, that is really nice."  Think of it as the Instagram effect. I'm particularly targeting casual games, but I suspect if that is nailed, people will find all sorts of uses for the toy. 
What I'm avoiding:
  • No copying an existing tool.  Sure there are well established paths for 3D modeling or vector editing, but that is too easy.  Lets go back to the design roots of these complex monstrosities and build up something elegant and different. 
  • No voxels: I don't want to use voxels.  Minecraft already does this so let's push in a wacky new direction. 
The closest I've found that fits these constraints is the amazing TinkerCad, which is a simplified solid modeling tool.  It is very nice, but only really ticks the first checkbox.

Here's what I've come up with.  If anyone find the idea curious enough and wants to build a prototype over a few weekends, I'm happy to collaborate.  This wacky, broken and experimental.  But what is the fun in sharing only perfect ideas?

Model Toy

Model Toy: An easy to use drawing and modeling tool for making stylized objects

Model Toy is a 'back to the roots' effort that asks if you can make a modeling tool by only manipulating vertices on simple curves. The tool is made of several basic elements
  • Grid-based drawing plane: All drawing occurs on a plane.  This can feel more like a 2D tools than a 3D tool. 
  • Shapes:  The key primitive is a unique extruded vector shape defined by 4 points on a plane. 99% of the time, the artist is moving around vertices. 
  • Shape Palette:  A list of available primitive shapes. 
  • Shape Properties:  List of the current shape's color, extrusion, etc. 


The heart of the tool are these odd 2D path-based primitives that Pete Blois and I have been experimenting with.
  • The shape is a 2D vector composed of 3 to 4 vertices. 
  • Each vertex is either a rounded corner, half rounded or straight corner. 
  • Vertices only snap point on the grid. 
  • The shape can be extruded and beveled. 
These actually came out of a lot of different experiments and I realized something really obvious.
  • Engineers tend to make art primitives that have lots of knobs and widgets...they are highly parametric objects with a complex interface.  
  • Yet, many artists don't necessarily think in terms of complex objects.  Instead, they use simple  things that are easily manipulated and then repeat the same tweaking action thousands of times until the composite result is interesting.  There are no explicit 'rotation' or 'scale' operation when painting.  Yet the results are still impressive.  
  • So this design preferences 'tweaking thousands of times' over 'a complex object where you set variables once'.

Basic move, scale and translate operations

One interesting aspect of these primitives is that they don't have an explicit scale, rotation or translation matrix for the user to manipulate.  Instead, all those operations are performed by moving vertices around. That's all you really do in this tool...move vertices about.
  • Move shape: Click on a shape to select it. Drag on the body to move it around.  This moves all vertices together.  Note that all vertices always snap to the grid. 
  • Deformation: You can deform a primitive by moving its vertices in a 3D plane. Drag on the square surrounded a vertex to move it to a new grid point. 
  • Rotate: To rotate, move vertices one by one until the new shape looks rotated.  This is not true rotation since the snapping to the grid will not allow true rotation.   However, the result will look rotated and that is all that matters in art.  This works surprisingly well. 

There are big limits on the shapes

We could allow thousand of these objects on the screen.  But instead I'm inspired by the elegance of low resolution pixel art where beauty comes from working within limitations. 
  • All vertices are constrained to a 16x16 square grid.  This allows for easy selection of vertices and accurate adjoining of shapes. 
  • There are only 32 shapes in any one model.  This encourages the artist to create elegant compositions. 
  • Each shape is one of 16 colors in a fixed palette. 

Shape Toolbar

There are four basic shapes you can create with this method.  Click one of the primitive button on the toolbar and the shape is added to the scene.
  • Circle: 4 rounded vertices
  • Rectangle: 4 straight vertices
  • Half Circle: 3 vertices: 1 curved and 2 half curve / half straight
  • Triangle: 3 straight vertices 
Example shapes that can be created by moving vertices about on grid

    One system for defining hidden control handles

    The follow is one method of getting the desired curves using bezier handles. Straight corners are a trivia case, but round and half round need to be tweaked to allow for aesthetically pleasing circular geometries.

    • For round corners, handles are defined only by adjacent vertices (vertex 2 and 3 are adjacent to 1)
    • Handles are parallel to the line segment ‘a’
    • Length of handle is proportionate to segment ‘a’  (Note that the .27 in the diagram is a value that results in 4 round corners arranged in a square yields a perfect circle.  There is likely a mathematical means of deriving this as well, but that is beyond me. :-) 

    • For half round, half corner points, calculating the normal based off the points adjacent to vertex 1 (in the picture above) results in a bowed out shape.
    • Instead, mirror point 2 across the line segment A. This creates a new ‘Fake A’ that goes in the correct direction.
    • The new curve handle for point 1 is now parallel and proportionate to ‘Fake A’

    What this toy lacks

    • 2D scale and Rotation: With such simple primitives that are easily rearranged, we don’t need these operations.
    • Full color picker: You can’t define arbitrary colors
    • Layers and grouping: With 32 shapes, a shape list is the layer list
    • Lines: There is only the shape color. Later on, we can have effects that apply to the object as a whole.
    • Empty shapes: Shapes always have a fill color.

    Extending to 3D

    To the left is the side view palette.  This is a bit like a layer palette in photoshop, but it also lets you control Z-depth.  This is a bit geeky and isn't my favorite part of the design, but worth trying.

    • Dragging on the body of the shape moves it left or right.  This is changing the depth of the object. 
    • Dragging on the left side of the shape extrude backwards. This snaps to the grid. 
    • Dragging on the right side extrudes forwards. This snaps to the grid. 
    • The profile of the shape shows its bevel. 

    Other shape Properties

    You can select a shape and edit its properties.
    • Color: Click a shape, click a color and the shape becomes that color.
    • Bevel:  Select the bevel for the object.  No bevel, rounded corners, dome, flat bevel
    • Extrusion:  Select how far you want the object to be extruded. 

    Open questions

    • Is this expressive enough?
    • Is there a better method of expressing the 3D extrusion?
    • How might it be simplified even further?

    Near Future

    The first part of the challenge is to get a basic editor up and running. For these new drawing tools you usually need to build it and then iterate on it 5 to 10 times so that the feel of the program is solid.

    Web-based editing, saving and viewing
    The model is editable in a browser window. You can save to a database and load. You can share the model with another user and they can make a copy of it and edit their own version.

    3D view
    Once you have a 3D view you can rotate the drawing plane to see the object from from various angles.  Some experiments to try:
    • The plane always snaps back to the frontal view when you release. 
    • Alternatively if you rotate the object 90 degrees, it snap to the side view and swap the side view for the front view in the other palette.  

    Export options

    • 3D model: Exports a static 3D model for import into something like Maya, 3DS or Unity. 
    • Bitmap: Export as a series of X (64?) images rotated around a center point. Includes Alpha

    Far future

    Shader sets
    Users can load in different shader sets as alternates to the base 16 colors. For example, there is a wood set that has different types and tones of wood. Or there is a metal set that has pitted bronze, steel and copper.

    Post processing and Lighting Presets
    You can apply a variety of preset post processing filters much like Instagram. Honestly this is where the magic occurs. The idea is that these are incredibly high quality professional filters that give your simple model a distinct style.
    • Outline: Add an outline to the image so that it looks like Land-a-panda. 
    • Pop art: Dot shading.
    • Sepia: Grainy, old timey image
    Define states for each model with each state have a different configuration of the 32 shapes.  For example, you could have a walk state and an attack state for a character.

    Now if you bundle these states into templates, you could provide users with a 'character template' that they can fill out to their heart's content to create a thousand unique characters that all 'work' the same.

    Animations between states
    Allow for tweening animations between states.  Add ease in and ease out for basic timing.


    This odd art toy is not a perfect tool.  Having made art for a few decades now, I'm not sure there is such at thing.  Instead it is series of constraints.  The theory is that these constraints will yield interesting art when placed in the hands of motivated artists.  We've seen this happen before.  Vector art is a style that emerged from the limits and strengths of printing technology.  Pixel art emerged from the constraints of early computer displays.  There is an exuberant creativity within carefully chosen walls. Is it possible to artificially foster that?

    Mostly I wanted to share these ideas.   For the folks that love an oddball project, this might be fun to play around with for a weekend or two.  It is certainly a way to learn about curves, 3D extrusions (and the exquisite pain of iterating on an artist-centric UI.)  I'd be delighted to give feedback and try out prototypes if any emerge.

    Long term if the basics works out, I could see making an entire professionally polished game in this art style with every single character, wall, door and tree built out of these shapes. This is the real test. Once you get artist trying their hardest to build real things with a new art tool, a feedback loop is born.  The artist asks for tiny yet critical features you could have never imagined.  After a few dozen iterations, the simple odd tool begins enabling amazing artists to create a certain kind of masterpiece.

    take care,

    · Older Entries >>


    Updated Today:
    A Green Mushroom [HTML] [XML] [FULL]
    DDOcast [HTML] [XML] [FULL]
    Engadget Gaming [HTML] [XML] [FULL]
    Eve Bloggers [HTML] [XML] [FULL]
    Rock Paper Shotun [HTML] [XML] [FULL]
    Updated this Week:
    GamesRadar [HTML] [XML] [FULL]
    No Prisoners, No Mercy [HTML] [XML] [FULL]
    The Instance [HTML] [XML] [FULL]
    The Old Republic News from Bioware [HTML] [XML] [FULL]
    Updated this Month:
    Lineage II [HTML] [XML] [FULL]
    Lost Garden [HTML] [XML] [FULL]
    Morphisat's Blog [HTML] [XML] [FULL]
    Oshun's Altar [HTML] [XML] [FULL]
    PC Gamer Podcast [HTML] [XML] [FULL]
    To Worlds Unknown [HTML] [XML] [FULL]
    Yeebo [HTML] [XML] [FULL]