!!! IMPORTANT !!! this library is not actively maintained - but don't worry, there is a follow-up development, which can be found here: https://github.com/spearwolf/three-vertex-objects !!!
P I C T U R E S I N M O T I O N
picimo is a creative coding project containing several javascript ∨ typescript libraries ∧ demos loosely based on realtime 2.5d graphics in html5 with webgl.
in the creation of picimo there were the following main objectives:
- I do wanna create realtime animated graphics in webgl and makes it easy to develop special effects in webdev or even gamedev in desktop and mobile browsers
- I want to create sprites* with custom properties defined by me and my imagination and render them with my own custom webgl shaders — and the API should be as simple as possible and be fun to use!**
- it should be easy to display pixel art graphics in a responsive design aware environment
* Why sprites? … as a child of the eighties i grew up with computers and console games that didn't have special 3d hardware. at that time most games consisted of 2d-sprites, 2d-levels with parallax effects and sprites that simulated a 3d environment (also known as 2.5d) - already at that time I wanted to be able to program something like that, but somehow I was kept from …***
** the most important aspect of all 😉
*** I am glad you ask: you can hire me as a freelance front-end developer — I am always happy to receive exciting project requests!
so picimo was started as a part time project in my spare time — during the evolutionary development phases the following experiences and insights were gained:
-
when developing your own webgl based rendering engine you can learn a lot of things but in the long run it is quite costly — so, why trying to reinvet the wheel? it is for this reason picimo relies on the fantastic three.js as webgl renderer
picimo does not even try to hide the three.js api, but sees itself as an additional library which has that one feature, a complicated thing intentionally made simple! … yep, you guessed it: sprite rendering and all the things that go with it
-
the development of visual and interactive applications using imperative programming is annoying — this is nothing new and is probably also responsible for the success of react (or similar frameworks). after early first experiments with a json based scene description or a web component based approach (how it does a-frame), picimo now uses the declarative, component based approach of the young and incredibly exciting project react-three-fiber
this is the main github repository for the picimo project and all of its related sub-projects.
the repository is organized into sub-directories containing the various projects. Check out the README.md files for specific projects to get more details:
| sub-directory | what's inside? |
|---|---|
| picimo | the main library |
| kitchen‑sink | a SPA with code examples for almost all features of the picimo library (is subject to major changes — in future all examples will be moved successively to the examples/* directory |
| examples/**/* | picimo examples — good starting point to learn about how to use the picimo api |
| picimo‑demo‑shell | a cli wrapper for webpack config and launcher to speed up development of the picimo code examples |
| datgui‑context‑hook | react hook for the dat.gui library |
When developing across all the projects in this repository, first install git, node.js and yarn.
Then, perform the following steps to get set up for development:
git clone [email protected]:spearwolf/picimo.git
cd picimo
yarn
yarn build
yarn testYou should now be ready to work on any of the picimo projects 🚀
Since this a monorep, we have global babel, eslint and prettier configs. Try these scripts:
| script | description |
|---|---|
yarn lint |
Run eslint and prettier checks for all sources across all workspaces |
yarn fix |
Run eslint and prettier fixes for all sources across all workspaces |
yarn cbt |
Run in sequence: clean → build → test across all workspaces |