szymonkaliski / sdf-ui Goto Github PK

View Code? Open in Web Editor NEW

109.0 7.0 10.0 282 KB

WebGL node editor for Signed Distance Functions

Home Page: https://sdf-ui.firebaseapp.com/

License: MIT License

HTML 1.38% JavaScript 93.53% CSS 5.09%

webgl react redux ui graph

sdf-ui's Introduction

SDF-UI

Experimental node-based UI for generating SDF shaders in a browser

Live: https://sdf-ui.firebaseapp.com

Made with react, react-gl, redux and immutable. Most of the code is intentionally left without any optimisations, to be used as starting point for building other graph-based UIs.

Run

clone this repo
yarn or npm install
yarn run start or npm start

Build

yarn run build or npm run build

TODO

make math operations work on vec3 as well as float - this will require inputs that can accept both floats and vec3s
add a way to "unpack" vec3 into three floats, process them, and pack again
overwrite connections instead of blocking if there's already one made

sdf-ui's People

Contributors

Stargazers

Watchers

Forkers

brucelane macromachines colinterface sandorlevi elongame texone mainuss buanderie foow ihc523

sdf-ui's Issues

Feature Requests

There are some very cool additional SDF combine ops in the HG_SDF source such as the fOpUnionChamfer and fOpDifferenceStairs etc..

I might suggest for tidiness and ease of access, creating an additional level of hierarchy to the create context menu with something like:
primitive
domain
combine
modify
math
i/o (system)

Firefox OSX delete goes back a step in page history

Firefox OSX seems to work the best so far out of the browsers I tried, the only issue being that delete/backspace both deletes the selected node and issues a hotkey to the firefox browser to go back to the previous page in history.

Overall the solution to the backspace issue could be an additional method of removing a connection or node, such as:
a context menu for cut/copy/paste/delete invoked from a command click aka right click
an additional / alternate key for delete, possibly "d"?

Objects are not rendered in Chrome on Linux

Hi Szymon,

Really cool project!

Unfortunately, it doesn't work in Chrome on Linux (objects are not rendered). I'm attaching a screenshot.
My configuration: Ubuntu 16.04.1 LTS 64-bit, Chrome v. 53.0.2785.116 (64-bit).
It's worth mentioning that it works fine on the same system on Firefox 51.0.1 (64 bit).

Edit:

I think, it may be an issue related to gl-react, because its samples also doesn't work on Chrome in my setup, but works on Firefox.

Regards,
Piotr

Chrome OSX render area refreshes only half of view

Chrome OSX Version 56.0.2924.87 (64-bit)

right half portion of render view does not refresh. if I change the window size it will refresh the full render view once and continue as before, partially refreshed.

UI: New_node menu not scrollable

The new_node menu (displayed when double-clicking on the editor) is not scrollable.

On relatively small screen, like my 1440x900 laptop, this means the upper part of the menu is not accessible.

Screenshot:

delete / backspace OS X

First off, incredible work, and great coincidense as I was just starting on something similar.

I am working from a MacBook pro 17 inch made years back. I can not seem to delete any nodes or connections. I did a search on google and it seems the delete key should be the same as the PC backspace but it is not seeming to do the expected behavior of removing a node or connection.

Safari OSX 10.12.3

Addition op should have parantheses

Addition simply outputs a + b. It should output (a + b) or even better ((a) + (b)).
As of right now (sin(t/400) + 1) / 2 is impossible because of this (the output is "sin(t/400) + 1 / 2" which is not the same thing)