grant-nelson/threedart

3D graphical rendering tool for websites written in Dart.

Welcome to Grant Nelson's Personal Account

Featured Projects

ThreeDart Live Examples | ThreeDart Repo

OpenSimplexNoiseDart Repo

Work Info

• My Workiva Github Account
  I've been a Senior Software Engineer at Workiva since 2014.

• Snow Gremlin LLC
  I am a manager at Snow Gremlin, lead developer for Snow Gremlin's projects, and consultant with expertise in software quality and embedded systems.

• Software Engineering and Cybersecurity Laboratory (SECL)
  I am researching technical debt analysis of procedural languages at SECL as a PhD student at Montana State University.

Publications

• The Causal Graph CRDT for Complex Document Structure
  by Aaron Hall, Grant Nelson, Mike Thiesen, Nate Woods

• A Gap in the Analysis of Technical Debt in Procedural Languages: An Experiential Report on Go
  by Grant Nelson, Clemente Izurieta

• Membership and Participation in Object Oriented and Procedural Paradigms
  by Grant Nelson, Clemente Izurieta, Derek Reimanis

threedart's Issues

Add a simple example of a hypersphere

Add a simple example of a hypersphere's volume to a hypercube's volume to demonstrate how 3Dart can be used to quickly make simple interactive websites

Implement Other File Types

Try Loading some of these: .3dm, .3ds, .blend, .c4d, .dae, .dds, .fbx, .lwo, .ma, .max, .mb, .tga, .ztl and more
When starting a new loading type, remove it from this list and create a new issue for the specific type

3DartCraft: Fix twitch

1. Move to the center of a block and wait
2. After about a second the player shifts to the edge of the block
3. There is also twichiness when moving fast which may be related or may be GC or something else

3Dart Craft: Mouse capture

For non-mobile browsers, on click the canvas should take control of the mouse so the player no longer has to click drag. Make right mouse button set block and left mouse button remove block. [esc] will make canvas release mouse control. Update text about movements

Need a translation mover

Currently there is no mover which translates an object. This translation mover should be able to use the AWSD keys to move a camera so that this mover can be used to move a user/viewer/player around an environment. There should also be getters and setters to change the speed of the movement.

To test this mover a simple test example should be setup which at minimum there is a textured floor. Additional objects could be placed around that the user could "walk" up to.

(Optional) Once the basic movement is functional, one or more ComponentShifts (or another tool) could be used to create a smoother start and stop for movements.

Obj and Mtl Improvements

Implement more of the features for these file types.
Will require some of the MaterialLight improvements.

3Dart Chess: Setup piece and board picker

Setup a color picker for the chess pieces and board squares. It should return to the game what was clicked on. To return it there should be a new enum.

Upgrade to using WebGL 2.0

It may be possible to have it fall back to WebGL 1.0, if we can we should do that.
Otherwise upgrade to use WebGL 2.0 and update things like texture loading to make the graphics look smoother and take advantage of the new features

var cnv = querySelector('...') as CanvasElement;
var gl = cnv.getContext("webgl2");

Implement entity picker

• Implement entity picker
  • Use a picker technique instead of a vector intersection since we'll do that when we have Quadtree or Octtree for entities
• Update chess example to make the pieces selectable

Need demo or example of ThreeDart (3)

There are repeats of this issue because the more demos and examples created the better.

Create one (or more) demo or example to excite, inspire, educate, etc. using ThreeDart graphics.
Some example ideas are:

• A beautiful outdoor scene. This could have a fixed camera. Maybe a scene which is like a dynamic picture: A beautiful relaxing forest, a lake, a city skyline, a space event, microscopic world, fish tank.
• An educational demo. Could be a dynamic video or could be interactive: A tour of our solar system, a break down of some machine, a close look at biology.
• A demo of a game. A simple short example of how a game could be rendered on a browser using ThreeDart: A top down, a side scrolling, a first person, a third person, or even a board game.
• Any other idea to demo ThreeDart

3Dart Craft: Add voxel modifier

• Add way to highlight the block in the middle of the view
• Add a way to remove the highlighted block
• Add a way to show a selected block type
• Add a way to add the selected block to the highlighted block

3Dart Craft: Prebuild chunk shapes

Chunks currently have a full shape behind them but they don't need all the vertex generation tools. It would save memory to prebuild the shapes vertex data and let the shape be disposed

3Dart Craft: Add lily pads

Add lily pads to generate on water surfaces

Need a front page to display demos and examples

Currently there is a placeholder page in the web directory. A clean good looking gallery home page which can be used to display links to demos and examples should be created. The home page should also link to documentation, tutorials, and this code base. This new page could be hosted on GitHub Pages.

LED Sign Shader

A shader which makes the image look like round or square pixelated points to simulate old LED red signs, CRTs, and oscilloscopes. This is to be used as a secondary pass which can be applied to just a texture for after effects

Cartoon technique and shader

Create a cartoon technique which uses two shaders, a cell shader and an outline shader, to create a cartoon effect. The cell shader could initially be simple with only one Light type and basic color materials, texturing and additional Light types can be added later. The outline shader should allow the thickness of the lines to be set.

To test the new technique, setup at minimum a simple test example of the technique on one or more complex objects which the user can rotate freely.

3Dart Craft: Split up texture

Split up the texture into individual texture to reduce the amount of memory, make it easier to add new textures, make mipmapping work better without bleed over, and speed up partial loading. The only issue is that the shape will have to be split up by block type and side for blocks with unique sides. The shaper tool needs to be improved to make it easy to do this grouping of the same texture per chunk.

Store CheckGroup state in URL

In some of my graphical tests I used checkGroup to select different settings for tests. When working on code I have to refresh to get the updated code but all my settings are then reset. It would be nice if the state for each check group was stored in the URL.

• Store the state for each check group in the URL
• Use the _elemId as the key since there may be multiple check groups
• If the key exists in the URL, the optional checked state can be ignored
• The state value could be anything, it would be nicer if it was related to a set of texts but it could be a set of indices instead
• Related to #13

3Dart Chess: Reduce the size of the sky box and other textures

It takes a while to load the chess example. Part of that time is details being higher than they need to be. Reduce them without creating seams in the skybox or pixelation in the textures. Not creating seams in the skybox may be hard, I haven't found a tool to do it easily

3Dart Craft: Mobile movement

Add a simple set of controls which can be shown to jump and move when 3Dart Craft is being viewed on a mobile device. These controls should be on the canvas (should be rendered with 3Dart Craft) so that when/if full screen is added the controls still work. Try to make the controls built into some kinds of add-ons to 3Dart so that they can be used for more than just 3Dart Craft and make them customizable.

3Dart Craft: Fix frame rate

Currently the frame rate is 60fps all the time. Since there are no other entities (mobs) on the map and nothing moves a render should only occur when it needs to. If something is moving, like clouds, turn those off before fixing this, then turn them back on but slow them down to change less often. This seems to be caused by gravity causing the player to fall and emit an onChange event even when the player is on the ground. Add a limiter to the event and/or turn off gravity when a player is in contact with the ground

Finish and fix the bend vertex data and MaterialLight bend feature

Finish transition the bend from a single indexed value to the multi-indexed values for providing better shape bending. Need to implement default generation of bending values for each shape. Also need to update MaterialLight and test035 to use and test shape bending.

3Dart Craft: Randomize

Add a URL parameter for a seed (ie. ?seed=1234) which is the seed to use in the noise generator for the world. If the seed parameter isn't present, randomly pick a seed using a built-in random number generator and set the URL for that seed as well as use that seed in the noise generator

MaterialLight Presets

Displacement map, shininess map, and several presets with built-in textures.
Some presets could be metals, plastics, gold, silver, etc

Initial tutorial

Write the first tutorial which walks someone through from cloning the repo up to having a simple rotating cube running locally. The final example code should be provided and (if the website has been setup) a link to a running version of the final result to compare against. This tutorial does not need to go into technical detail about how 3D graphics work, only how to create and put together ThreeDart objects to make a scene and maybe a little information on what each of the parts do. Assume minimal understanding of 3D graphics from the reader.

3Dart Craft: Add some more block types

Add some more block types, they don't have to be randomly added to the world, just accessible from the "hand" selection

Pre-apply displacement map to a shapes vertices

When creating a shape the texture coordinates, the shape's normals, and an image could be used to displace the verticies. The image's color defines the amount of the displacement. That amount should be able to be scaled when applied. The vertices normals define the direction of displacement.

To test this a test example should be created which applies a displacement map to a grid, sphere, and/or cube.

Update the first tutorial to show how to use Dart 2.0

The first tutorial (and only at this point 😢 ) currently shows in it's code snippets the HTML for Dart 1.x. This code should be updated to show how to setup the HTML and Dart for Dart 2.0

3Dart Craft: Update io page

This has to be done periodically, this is just the most recent time. Make sure the pages are up to date and that 3Dart Craft works from the io pages.

3Dart Craft: Comment and document

Add comments to all the methods public and private members and functions
Add any other documentation that seems important to help other devs work on this example

Scene and Shape Octtree Backing

The octtree should be a separate data structure so that it can be reused for many different uses. When starting this issue it should be broken up into as many sub-issues as needed and put in a project.

Scene

Currently all entities are stored in a hierarchy tree. It will continue being stored in the hierarchy tree so that it may be moved and updated correctly. However when rendering it should use AABBs in a octtree which culls entities which aren't visible. This could also be used to help with future collision detection and physic add-ons.

Maybe this shouldn't be a requirement while running entities but some kind of add-on which can be set to entities so they could add to it and update as they need. Another option is to create one entity type which any children added to it are put into an octtree. May need to experiment and try out what works best or do both.

Shape

Currently the vertices and elements are stored in lists. At some point the lists will be replaced by octtrees. This will provide faster shape creation, faster collision detection, and new functionality, like shape union, intersection, and clipping.

Implement animations

Implement animations and cycling textures.
Use the water in 3Dart Craft as one of the tests for this.

Basic Tessilator

Add a basic tessilator for determining how to tessilate a complex polygon into triangles. This allows quick creating of extruded polygons and complex surfaces.

Change License

The default Licenses added for dart libraries are limiting and off putting. This project should be more inviting and try to grow a community for 3D web dev. A simple license in the main README.md should suffice

Since this license belongs to SnowGremlin LLC, only @Grant-Nelson may make this change

3Dart Chess: Add turn indication

Add an indicator to the Chess Example that shows if the current turn is white or black. This can be done with two images which is shown in statically somewhere on the screen.

Set limits to FOVs

Set limits to Perspective, Skybox, and any other FOVs that need limits.

3Dart Craft: Fix unselectable blocks

There are blocks on the edges of chunks, specifically in the negative side of the world, which are not selectable because of some discrepancy in the highlight determination mathematics (some OBOE probably).

Store RadioGroup state in URL

In some of my graphical tests I used radioGroup to select different images, shapes, colors, etc.. When working on code I have to refresh to get the updated code but all my selections are then reset. It would be nice if the state for each radio group was stored in the URL.

• Store the state for each radio group in the URL
• Use the _elemId as the key since there may be multiple radio groups
• If the key exists in the URL, the optional selected state can be ignored
• The state value could be anything, it would be nicer if it was related to the text but it could be an index instead
• Related to #14

Fix the refresh of the unit-tests

Currently to update the status of the unit-tests, the unit-test steps are run during the animation frame. This means if the tab or browser becomes hidden the unit-tests stop being run. If it is possible the status of the unit-tests should be updated even if the unit-tests aren't currently visible.

3Dart Chess: Make the pieces and board cells highlightable

Make the pieces and board cells highlightable so that the selected piece and cell locations which can be moved to can be highlighed

Bloom technique and shader

A technique and shader pair which may work with a CoverPass to lighten and dim the scene while also blurring the image where it is "too bright" thus creating a bloom effect.

To test this create a test example which contains moving dark and light parts of the scene (for example a carved box with holes and a light source inside the box).

3Dart Craft: Basic lighting

Add color to the vertices and set the color based on visibility to the top of the world (i.e. can the ground be seen from the top of the sky) to simulate lighting. Could also add some kind of lighting, a torch, a light source, or whatever which also adds light to the vertices out a distance

3Dart Craft: Underwater

Flip the water culling when the player's head is under water. This may requires either building vertex data from a shape (not desirable) or add the ability to an entity to flip culling (more difficult but better)

Need demo or example of ThreeDart (1)

There are repeats of this issue because the more demos and examples created the better.

Create one (or more) demo or example to excite, inspire, educate, etc. using ThreeDart graphics.
Some example ideas are:

• A beautiful outdoor scene. This could have a fixed camera. Maybe a scene which is like a dynamic picture: A beautiful relaxing forest, a lake, a city skyline, a space event, microscopic world, fish tank.
• An educational demo. Could be a dynamic video or could be interactive: A tour of our solar system, a break down of some machine, a close look at biology.
• A demo of a game. A simple short example of how a game could be rendered on a browser using ThreeDart: A top down, a side scrolling, a first person, a third person, or even a board game.
• Any other idea to demo ThreeDart

Add a screenshot target

Add a render target which renders to an image that the user can save as a screenshot.
Create a test which has a button that when pressed swaps out the front target of a scene with the new screenshot target, a single frame is rendered to the screenshot then the target is swapped back.

If a target doesn't seem to work to implement screenshots then add whatever is needed, but keep in mind that we should be able to take any part of the rendering which is written to a target and create a screenshot, not just what is currently being drawn to the canvas. This would allow a very simple scene to be setup then allow a slow high quality much larger image to be rendered off that scene as the screenshot.

3Dart Craft: Add clouds

Add noise generated clouds or cloud textures which slowly move. Only update the clouds every few 0.2 seconds or so, instead of on every frame to help with the frame rate

3Dart Craft: Autogenerate chunks

As the player moves, dispose of old chunks and create new ones at the edge. If done correctly the world should appear infinite. Since there is no server backing up any deltas, don't worry about loosing the changes, this is just an example. However, do add a comment on the example page similar to, "chunks will be regenerated if the player gets too far away because of the lack of server backing it up since this is only an example of 3Dart and not intended to be a full game"

3Dart Craft: More uniqueness

Make the tree leaves, ferns, mushrooms, and flowers use another consistent random number from the noise generator to use different shapes, textures, orientations, sizes, whatever. If done correctly the each plant will be more unique but will be regenerated the same each time a world with the initial seed is created

Need demo or example of ThreeDart (2)

There are repeats of this issue because the more demos and examples created the better.

Create one (or more) demo or example to excite, inspire, educate, etc. using ThreeDart graphics.
Some example ideas are:

• A beautiful outdoor scene. This could have a fixed camera. Maybe a scene which is like a dynamic picture: A beautiful relaxing forest, a lake, a city skyline, a space event, microscopic world, fish tank.
• An educational demo. Could be a dynamic video or could be interactive: A tour of our solar system, a break down of some machine, a close look at biology.
• A demo of a game. A simple short example of how a game could be rendered on a browser using ThreeDart: A top down, a side scrolling, a first person, a third person, or even a board game.
• Any other idea to demo ThreeDart

3Dart Craft: Remove grass/plants when block below it is removed

When a block is removed (set to air), check if the block above it is a plant, then set that block to air too.

May need to make a quick way to identify places kind of like open but to determine plants (probably could just use open for now)