The sdfui from ngimbal

iPad /Apple Pencil Compatible

Apple Pencil compatibility could be a dealbreaker for some users. Apple Pencil has emerged as the clearly dominant form of drawing on screens.

This is made difficult in my case because I chose (for reasons that are no longer relevant) to use WebGL 2.0 which is not compatible for iPad. Translation to WebGl 1 would be possible but tedious.

Another possibility would be to try and use Expo or something similar to compile the web app to an iPad app. Native app experience would be preferable anyway.

Edit point position by click and drag

Select, click and drag point to change location

Snap to Grid

Need to add some offsets to make snap to grid more smooth - currently it's not correct.

Snap to Global

Snap to global only affected by points in edit item, not in whole doc

"Layer" terminology is unfortunate as Layer should actually refer to a higher layer of abstraction group of objects on a layer of the drawing. Element is the currently winning idea for what to call this. Other ideas are:
Leaf
Object
Item
DrawObject
Plane
DrawQuad
Glyph

I kind of like the Leaf idea but it is sort of obtuse. Glyph is nice but also a little too obtuse... maybe the most accurate. Although might become overloaded with font rendering in the future? Likely each character would be rendered on its own bounding quad? DrawQuad - what if I implement clipping at some point? Maybe it should be leaf or glyph...

Layer Quads

User definition of variables driven by other point locations, distances between points

UI element to define, save and use variables driven by user input or point locations.

Export Primitive to SVG

This probably wouldn't be that hard - need to loop through scene and convert rect/circle/polyline/polygon/curve... would be a really good feature for interoperability.

Collaborative Design Illustration

The task
Free form drawing to aid thinking and communicating to subordinates about abstract forms, perhaps with little or no respect to context or constructability. Often this involves providing feedback to designers on an ad-hoc basis.

Frequency of this task
For competitions and projects with high demands on the design, a single design partner can conduct these meetings 1-2 times a day for up to an hour each session.

Story of the task
A busy design partner has a free hour in the middle of the day to review the work of 3-10 designers. They haven't prepared design materials but take screenshots of their models that the design partner sketches over. The design partner quickly draws with gestural strokes to evoke an idea of a form or arrangement of forms to the designers. They may raise questions or concerns about ideas, but it is generally taboo for them to draw on the partner's work. They may apply a layer of trace or start another drawing to communicate their idea. These drawings are often done with markers on trace paper and layered for iteration.

How is this task accomplished now?
Snip and sketch over screenshots w/ screenshare, design partner dictates changes that a designer makes in realtime in 3D modeling program (Rhino), screen share over video chat w/ "request control" (sub optimal experience), PDF / image edit, attach and email back.

Necessary features

Features that could enable new efficiencies

Simultaneous editing with voice chat #42
Layers, like layers of trace, as ui idea to show history of a drawing. #54

Design Sketch / Parti (SH Planetarium)

Design Sketch for Publication (Herzog and Demuron Prada)

Trim, exted, fillet lines, offset

These tools are very important to any CAD drafting workflow. Will have to figure out how they translate to the SDFUI world. Will have to operate at the point level to create independent objects, which negates some of the benefits of SDFs but... only slightly. For some of these things will look to JS implementations of distance functions, which should be easy.

Creating an offset tool that operated at the SDF level could be very interesting, basically it would be a child of the original object and would always maintain that offset distance.

Fillet could also be done at the SDF level as is being explored with the rect tool, but quick explorations have shown some complications with scaling the shape.

Deployment on AWS Amplify is messed up

MIME type isse

Dimension between lines (parallel)

Dimension between parallel lines. Want this to not operate at the SDF level. Dimensions and text will probably be SVG / HTML.

Disentangle State from all rendering logic

This isn't going to be too much work, but is important to the effort of clarifying rendering api vs. client code.

This is mostly an issue in the layer.js file.

Annotations of drawings with arrows + text

Essential to all workflows. Should be done at HTML or SVG level.

At some level this will be a hybrid system. Question will be what is best done with SDFs and what is best done with SVG.

Spatial Indexing using Rbush

Check collides with view port - only draw what's actually on screen. Similar logic will be necessary for selection.

Projects -> drawings organization and browse

Basic user data browsing and retrieval of a drawing.

Chrome Runs out of Memory

Need to figure out how to optimize memory usage.

Export to 3dm

Use rhino compute or opennurbs or something to convert scene to 3dm file format...

Hatches to indicate material

This will be a type of filled polygon, with hatches that are defined by SDF patterns.

This is one place where an SVG implementation would be impossible, and an SDF implementation will be doable and flexible.

Down the road it will be essential to find out how to translate traditional .PAT file format to SDF pattern.

Reference
Pattern implementation reference

Logo

Version 1:

Curtain Wall Coordination

The task
Spatial coordination of elements such as glazing, structural elements, MEP ducts and piping, interior finishes, shade roller pockets.

Frequency of this task
Weekly collaborative meeting starting in Schematic Design and going through Construction Documents. This period can last anywhere from 8 months to 2 years. Intensity and frequency of these meetings will vary over this period. Size of meeting can be between 3 to 15 participants around 3-10 monitors.

The story of this task
The design architect has an innovative design including a sculptural diagrid expressed on the exterior of the building. The structural engineers have designed a set of concrete members that are clad in a complex build up of furring, insulation and GFRC cladding. Code requires a certain area of glazing, but the nature of the building requires the glass to be a special blast resistant assembly. The facade consultant has advised that the blast resistant glazing unit can only be produced in a certain range of sizes. The MEP engineer wants 36" of plenum space for duct work and sprinkler system, but the design architect knows that will diminish the amount of glass that's left for the facade. They design a complex shade pocket that allows the plenum depth to reduce in dimension at the perimeter of the building.

How is this task accomplished now?
Lots of PDFs emailed back and forth, hand sketching with pen + pencil colored pencil / marker. Trace paper is used to iterate and embellish. Hand sketches are translated to 3D models and parametric models in other programs (Rhino + Grasshopper, Revit + Family Editor).

Necessary features

Features that could enable efficiencies

Collaborative, simultaneous editing with voice chat #42
Propose / accept edits (i.e. pull requests, global doc suggest edits) #43

Images by WK
WK is a 60+ y/o architect who has an encyclopedic knowledge of curtain wall detailing. He prefers drawing by hand, but is not necessarily a luddite. Recently he has taken steps to learn how to draft in Rhino with the goal of 3D printing his details. He says he hates Revit.

Image by Heintges
Heintges is an older facade consulting company who are proficient at coordinating details in Revit.

Selection by click + box

Transition to rbush from kdtree
Click to select
Set curr object(s) reducer
update object(s) params reducer
Distance to rectangle function in primitives
Distance to circle function in primitives
Render selected objects bounding box (separate shader?)
Drag to select

Render select object bounding box is just going to be a shader that loops over points in pt texture, each point (rgba) represents rect like in rect shader, draws rectangle, thin line sharp corners, blue, decorates with indicators for handles. Probably like open circles at corners and edges maybe. depending on implementation.

Might want a second rbush for transform handles? to represent these points for selection / transformation? Or maybe just add to existing Rbush and retain a reference to the bounding box points in existence? That could get crazy?

Object Property Panel

Opacity, Lineweight, Fill Color, Stroke Color
Object notes?
Object name?
Object Position?

Color Selection Ideas

eyedropper
apply format to another shape
color scheme suggestion
recently used color list

Undo / Redo of edits

Implement undo / redo with the automerge object.

Arc primitive

Primitive object for drawing arc segments.

Freehand erasing of scene

Like marker tool, implement similar to polycircle but with subtract merge op.

This would give a raster feel while maintaining SDF / Vector nature.

Draw Bezier Curve

Implement bezier curve primitive

Reference
Closed signed distance to polyspline
IQ signed distance to bezier
Cubic Implementation
Rational Cubic
"Interp Curve" type implementations with notes on performance
Nice example w/ shader UI

Issue on Windows 10 Chrome

ngimbal.github.io-1575562323083.log

Want to get this working on Windows 10 Chrome. Tried enabling experimental webgl features in Chrome but also didn't help.

Import, translate, draft on top of images done in other softwares

Enable input of png (then pdf?) images done in other softwares.

Snips of other ppl's drawings, model views, drawing sets, site conditions, manufacturer details are a big way ppl communicate and work today. If a drafting / markup software can't bring in external images then it's almost worthless. Revit technically can do this, but it's capability is actually very limited, and this is a major frustration with Revit. Even more essential for a "design communication" tool.

Unclear whether this should be implemented at the shader level or by compositing the shader image with a standard HTML canvas below. Compositing shaders as textures may be one way to reduce shader recompilation in the future.

Edit locations of points and lines by reference to other points

Edit point locations by inputing dimensions relative to other points or lines.

Zoom, pan

"Infinite" drawing board, zoom and pan grid

Reference
~~Reference implementation~~\

Zoom, pan is working with click + drag
Zoom, pan is working with trackpad scroll + pinch
"Return to origin" UI button
Graphic indication for edge of page / major minor gridlines
Enter / exit "pan" tool for mouse click and drag pan, stop drawing when in pan tool
Testing on Mac / Chrome
Testing on Mac / Firefox
~~Testing on Mac / Safari~~
Testing on Windows / Chrome
Testing on Windows / Firefox
~~Testing on Windows / Edge~~

Angle Between Lines

UI Display for angle between lines.

User edit fill opacity

Fill opacity should be a user editable property

Parametric Module Design

The task
Design a module defined by dimensional parameters, usually the value of those parameters are dictated by some outside factor.

Frequency of this task
The importance and frequency of this work flow depends on the designer and whether they like to work with parametric models. For someone who likes to sketch and design this way, it could be a daily activity. For major design problems that need to be tackled by multiple parties, this might happen two or three times at the Concept - Schematic phases of a project.

The story of this task
The design partner has designed a wildly expensive undulating facade. A young technically minded architect, inspired by the design but afraid it will be too expensive looks for ways to rationalize the design. This architect realizes that a very similar design can be realized using a small number of repeating parts that vary in a few key dimensions. The young architect uses a tool to design a parametric model that represents this module and can flexibly illustrate the variations in type and accommodate changes as the design is refined for construction.

How is this task accomplished now
Tools like Grasshopper (in Rhino), the Revit Family Editor, Bentley Generative Components, Vectorworks Marionette allow designers to problem solve using parametric models.

Necessary features

Features that could enable efficiencies

Collaborative editing w/ simultaneous voice chat #42

Copy / Paste / Transform scene elements

Select, copy, paste, transform elements that have already been placed

Freehand drawing like marker

Freehand drawing of fills like polycircle with user defined opacity. Brush shape could be like chisel tip marker.

Apple pencil integration would have to include pressure sensitive and orientation response. Pressure should just translate into scale + opacity.

Propose / accept edits like pull requests, google doc

Preview / review and pull in (or reject) new changes from a collaborator. Great to facilitate the Architect's role as final arbiter who is responsible for coordinating input from many consultants.

Arrange elements (bring to front, send to back)

Edit z-depth of objects. Will require proto distance function, recompiling shader potentially. Editing order of distance function calls.

Edit locations of points and lines numerically

Selecting a point reveals a ui element that allows for editing the point by numerical coordinates. Dimensions and origin will have to be considered, potentially adjustable.

Layers, layer arrangement, compositing

Drawing should be organized into layers that can be arranged and composited.

Would need a good UI for this.

This could be used as a strategy for reducing frequency of shader recompilation.

View document history as layers

Drawing layers would be a powerful UI element to represent document history, similar to how iterations happen over successive layers of trace.

Project Cleanup

Lots of little UI / UX things need to be translated to all primitives.

deselect on finish drawing
click to select functionality fix
in select mode don't render current edit item
drop shadow on hover all primitives
finish up point light tool
FAB button cleanup
Study / Diagram / Document pixel alignment, transformations

Push Edit Item

Push edit item results in extra items in scene

Fix circle bounding box

This was some shoddy coding - fix it :)

Dimension between points

Simple display of linear dimension between points. Will require consideration of units. Probably need UI element to determine units.

Convert DrawUI to EventEmitter

DrawUI is going to become an event emitter for the purposes of managing interactions with the scene. This is going to be a major refactor.

Doesn't Work in Safari

Need to investigate....

Website

Need to have a website that shows off Lamina and everything I love about the project. Whether this is going to become an open source demonstration project that I just continue to tinker with or if it becomes something more either way it's going to need some kind of website to explain the project. Biggest element is going to be some kind of live demonstration.

Collaborative editing with simultaneous voice chat

Collaborative editing online, using Automerge peer to peer (webRTC) with credentials and document persistence provided by Firebase.

Check the Automerge + Firebase + Simplepeer repo. Simplepeer offers voice and video streams natively.

Alternatively firebase could provide collaborative editing without the peer to peer complication.

ngimbal / sdfui Goto Github PK

sdfui's People

Contributors

Stargazers

Watchers

sdfui's Issues

Recommend Projects

Recommend Topics

Recommend Org