
Show HN: Primrose – a text editor that runs in a WebGL texture - moron4hire
https://primroseeditor.com/#instructions
======
keerthiko
So here's why this is particularly awesome in my head.

I am a digital nomad, and basically travel with a backpack's worth of stuff,
developing off my 13"MBA. The thing I miss the most about my old office is
having a nice monitor. The thing I miss most about having a home is my
3-monitor desktop setup. Both things I had to give up because they don't fit
in my backpack and because I can't easily procure them wherever I travel to.

But if I can pack an Oculus Rift headset into my pack, I dunno, a year from
now. I can have all the multi-desktop computing environments I want, and
they'd actually be way more awesome than just 3 flat monitors.

Beyond all that, text editors and dev environments have seen little UX
improvement given the rate of evolution for everything else digital. This
looks like an awesome step to trying some really radical things (I know this
is a previously explored topic though, but I love being reminded of it).

OP, this is awesome. I happily leave the future of my dev environments in your
hands.

~~~
imaginenore
What stops you from having multiple windows on your desktop?

Oculus sucks at displaying text - it's low resolution (half of 1080p), it has
crazy chromatic abberations, and you have to transform "spherize" your image
to correct for the lens distortion, further reducting the resolution.

Oculus is not light - it's pretty annoying to wear it for longer than 20-30
minutes.

~~~
Tojiro
This is all true of the hardware as it exists right now. By the same token the
original iPhone was low res, slow, only 2G, and bulky. The iPhone 4 (first
with retina display) came out only 3 years later. That's a huge leap in such a
short period of time.

If VR catches on at all you can expect it to see the same type of
acceleration.

~~~
moron4hire
Yeah, that was kind of a motivation for me. I was sick of standing around,
talking about what was or was not good for VR, with people who didn't even own
a Rift, let alone program anything for it.

------
bronz
Just a warning, if you try this while using Safari it might crash and close
all of your tabs somehow. And it might make it so that you can't reopen those
tabs despite the fact that you have tabs set to be restored each session. And
you may in fact experience the acute pain of losing a year's worth of
painstakingly accumulated tabs. Not that this has happened to me.

~~~
moron4hire
I'm really sorry about that. I didn't know it was going to do that. I had seen
that it was doing that in browsers on Android and specifically disabled it for
mobile users to avoid such an awful experience. I had just assumed that
Safari, being WebKit, would work just as well as the least common denominator
of Chrome and Opera. Again, very sorry.

I guess that will teach me to start sneaking into my wife's computer bag and
borrowing her Macbook to test these things.

~~~
bronz
No apologies are needed, nothing critical was lost :). Cool project BTW.

------
bcjordan
Wow, this is AWESOME.

Imagine playing around in a Voxel.js Minecraft world, walking up to an NPC,
and lifting the hood to reveal its live-editable source code.

Looking forward to see hacks using this.

~~~
moron4hire
That's pretty much why I made this! I've been wanting to build live-editable
objects in VR, but I was severely dissatisfied with the options available.

~~~
Procrastes
Yes, this. I want to be able to map the amazing flexibility I had in
SecondLife over either physical. I want to see programmable objects or virtual
objects in a "layer" over the physical world and be able to open them up and
edit the code, just as I was able to do in SecondLife. The creative
possibilities are vast.

~~~
moron4hire
I actually have a project in the works for something like that. I took a break
from it to make this.

------
BoppreH
Failing with the following error in Chrome:

    
    
        GET https://primroseeditor.com:8082/javascripts/ga.js net::ERR_BLOCKED_BY_CLIENT
    

And in Firefox it's not even loading the home page, with an error of "too many
open files".

~~~
wanda
You have μBlock installed in Chrome by any chance?

ga.js is "classic" Google Analytics, generally considered a privacy concern
worth blocking.

Blocked by client means blocked by _you_.

------
daenz
Just from the description, this nails something I've been wanting to see for
awhile. Having text editor "primitives" (panes, windows, tabs) be actual
geometric primitives is a fantastic start to next-gen editors. More power to
you!

~~~
moron4hire
Thanks. I definitely want to implement more of those parts as I go. I just got
a bug in me about making this one earlier this month and started pushing it
through. Now that I have this, my next project will probably be a small, AI-
programming game, ala CRobots or something.

------
hughes
This reminds me of RiftSketch[1]! Maybe you should get in touch with
brian_peiris :)

[1]
[https://news.ycombinator.com/item?id=8411638](https://news.ycombinator.com/item?id=8411638)

~~~
moron4hire
Actually, that's where this project came from. Several months ago, we had had
a conversation about the difficulties of integrating text input in WebVR.
[https://github.com/brianpeiris/RiftSketch/issues/13](https://github.com/brianpeiris/RiftSketch/issues/13)

After New Years, I got the bug in me to work on this and just knuckled down on
it. Though, Brian appears to be happy with where he is, now.

~~~
robertkrahn01
Author of CodeChisel3D here: I integrated the ace editor for the purpose of
being used in webVR environments: [http://kra.hn/projects/live-programming-
with-three-and-webvr](http://kra.hn/projects/live-programming-with-three-and-
webvr)

~~~
moron4hire
I'm sorry I didn't know about your project a month ago. I'd be very curios to
hear how you render the text. Are you still using Ace for the rendering, or is
it just for the editing and tokenizing?

In my very first proof-of-concept, I used hidden DOM elements to do the layout
and styling of the text, and then queried the element properties to figure out
the draw operations I needed to do. It was very slow and really unreliable,
though, and I had a lot of cross-browser issues. Ultimately, redoing
everything from scratch was actually _easier_ than trying to hack around DOM.

I've been seriously considering implementing a soft keyboard for mobile
devices as well. It's just so hard to get the ones in the wild to interact
with text in any common way, and on iOS it's nearly impossible to get
everything resized correctly to use the most of the screen real estate.

~~~
robertkrahn01
The motivation behind CodeChisel3D is to reuse everything that ace provides,
text modes, syntax highlighting, completion and so on. So, yes, my approach is
to create a hidden ace editor in the DOM and then hook into the rendering
mechanism of ace to render it to a texture that can be mapped into webGl and
threejs scenes. The main reason for that is to support live webVR coding. I'm
currently working on another project but I will get back to CodeChisel3D and
improve it. You seem to have come quite far with primrose and might not be
interested but the actual editor integration is here:
[https://github.com/rksm/three-codeeditor](https://github.com/rksm/three-
codeeditor). Feel free to use it.

------
leepowers
This would be cool to code a game from within a game. A game mechanic where
you have to "hack" a computer system to gain rewards or advance levels.

A few notes, using FF35 on OSX 10.10:

1) Can't use without first going full-screen.

2) Red dot follows the mouse, but with a large offset.

3) Cursor doesn't focus where mouse click occurs. Doesn't focus where red dot
is either.

4) No visual indicator when a window has focus. So keyboard navigation often
results in accidentally typing a/w/s/d in a code window.

5) Would be nice to use click/drag to pan up/down/left/right.

~~~
moron4hire
Thanks for the issue reports.

#1 is interesting, I've actually had the opposite problems: not being able to
get things to work in fullscreen on OS X. My wife has a Macbook, so I will try
to test there (if she will let me).

#2 and #3 are probably the same issue, expressed in two different ways because
the red dot is placed completely independently from the caret drawn in the
texture. Do you think you'd be able to figure out if its OS or display
related? I.e. do you have a retina display? I should be collecting analytics
on screen and pixel ratio metrics, sigh.

#4 was a punt, I just wanted to get the job out the door. I did want to dim
the editor when it wasn't selected, and provide a key combo to deselect, but I
ran out of time on my self-inflicted deadline. It is definitely in the
pipeline, however.

#5: did you notice that SHIFT+mouse movement panned the view? Or are you not
satisfied with that system? I admit, I'm not wild about it myself, but it
seemed like the least evil of all of the options, considering the interactions
that I also had to do with the editor.

------
jokoon
I wonder how doable it would be to make most of the software we use, or even
the system (but not the kernel), run on a GPU.

Any windowing system or GUI is already mostly a graphics application.

~~~
moron4hire
This is actually how Desktop Window Manager (aka "Aero") on Windows and Quartz
Compositor on OS X actually work. They're just setup with an orthographic
projection and they don't rotate the windows at all.

That was actually a bit of a surprise (though I admit it shouldn't have been)
with Primrose. If I pick dimensions for the editor that fit the window's
aspect ratio, and don't rotate the view at all, then the editor pane can fill
the browser window and it looks very natural.

I am not positive, as I don't have the spec laying in front of me and it's
been a long time since I looked, but I'm pretty sure the HTML5 Canvas API is
not hardware accelerated at this time. That is how I do the actual rendering
of the text, using Text API.

There is another project called fontpath[1] that can read TTF and OTF font
files, and another project from the same developer called gl-sprite-text[2]
that can render them as bitmaps to textures. I've been considering converting
my rendering over to using it. The process would at least be good practice in
decoupling the code a bit more, as I think the tokenizer and keyboard system
would be useful in other projects as well.

The keyboard code pages aren't yet complete for everyone in the world right
now, but I think they go a long way towards making it possible to once and for
all make good keyboard interactions in JS. And by completely implementing my
own end-around of the browser's own handling, sticking to more of the older
primitives, I am actually able to make for more cross browser compatible. I
don't know if anyone noticed, but this runs in IE perfectly fine, and I didn't
really do anything special to make it so. And if you just run the Canvas on
its own, without the WebGL part, it actually runs on some relatively old
browsers without any trouble.

[1]
[https://github.com/mattdesl/fontpath](https://github.com/mattdesl/fontpath)

[2] [https://github.com/mattdesl/gl-sprite-
text](https://github.com/mattdesl/gl-sprite-text)

------
iandanforth
This is super super cool. Feedback: I keep loosing the mouse pointer. The red
dot seems to sometimes show up but it's pretty hard to track. Chrome latest on
Ubuntu 14

~~~
moron4hire
Yes, it's in the TODO list. But I was very urgently wanting to release this
month. Thanks.

------
marcosscriven
Looking at this 'virtual' text editor the text looks pretty smooth, until you
get really close. Would it be possible to import typefaces as paths, and
antialias them?

How do native apps do this, while also using hardware acceleration? Also,
native apps can access sub-pixels for antialiasing, which I don't think is
possible in a WebGL context.

I've seen OpenGL GUIs before, but I wonder what limits them compared to native
apps, particularly when it comes to text and sub-pixel antialiasing.

~~~
moron4hire
Actually, there is another open source project in the world that does that.
It's called fontpath, I believe, and it reads OTF files directly. I'm
considering switching to it, as the HTML5 Text API isn't hardware accelerated
and a huge amount of the processing time is being spent in the fillText
method.

[https://github.com/mattdesl/fontpath](https://github.com/mattdesl/fontpath)

------
habosa
This is so cool. Very interesting as an idea, hard to explain without seeing
it I almost didn't click.

Side note: I tried to load this on Chrome for Android and it went very badly.
I got redirected through two of those bright red "UNSAFE YOU SHALL NOT PASS"
https pages and then finally got to a page that didn't do much at all. No idea
why, worked fine in Chrome on OS X.

~~~
moron4hire
There are no overt technical reasons it won't run on Android. At one point, I
did have it running in Chrome and Firefox on Android, but I had a lot of
difficulty getting it to run without regularly crashing the browser and
bombing out to the home screen. I don't know if that is an Android issue or a
Galaxy Note 3 issue, but it was pretty reliably reproduceable in both browsers
with just a "load this page, now refresh the page".

I also somehow broke the touch screen controls at the last minute. But I was
really keen to get this project out by the end of this month. So I cut
features to get in on my self-imposed deadline. I just shut it off to avoid
procrastinating release, focusing on too many UI issues or trying to avoid
crashing people's browsers when I haven't the slightest clue if there is
anything I can do about it.

Most of my career has been working in consulting, mostly for the type of
consultoware companies that make all the boring, MS-tech, CRUD projects. I've
been freelancing for the last three years, but even that isn't ideal. I've
always wanted to have my own projects, building the type of products I've
always wanted.

Over the years, I've had a lot of personal trouble with procrastination of
completing projects. 10 years of starting and stopping the same ideas,
becoming dissatisfied with my work, and eventually growing bored of it and
letting it rot on a forgotten hard drive somewhere. I've always known it was
an avoidance tactic. By focusing only on the core technical issues, I'd never
have to address the tertiary tech and management issues common to releasing
any project. So that was another motivation behind this project: just get
something together and get it done, out, and in front of people.

I couldn't be happier with the results. Yes, it's missing features. Yes, the
server is kind of janky, being that I'm not a sysadmin and only even learned
how to turn SSL on a few months ago (though I think it's actually my host's
fault for not configuring some of my certificates properly). But I think it's
pretty good for a month's worth of work.

~~~
habosa
Thanks for the very detailed response, I hope you didn't take my comment to be
negative! This is an awesome project, it's just kind of a tradition on Hacker
News to point out bugs (even small ones on great things) because this is a
technical audience.

~~~
moron4hire
No, no. Just thought it was a good opportunity to explain.

------
bkyan
Is it safe to assume that the $10 closed-source license includes all updates
through a 1.x release?

~~~
moron4hire
Yes, one time, forever perpetual. I should write that down. Thanks for the
reminder.

------
otis_inf
And then I hit Backspace while not inside the editor pane I moved the camera
in front of and was transferred back to HN through the browser's back feature.
Not sure if that was meant as a 'enough played, back to reality' nudge from
mr. Firefox...

------
shurcooL
This is really cool, and it's the direction my project (with a large scope)
will eventually go in. I already have a text editing component and
highlighting working using OpenGL, but it needs updating to not use immediate
mode so it can run in WebGL too.

~~~
moron4hire
Would love to hear more about your project.

~~~
shurcooL
Thanks. You can see it at [https://github.com/shurcooL/Conception-
go#screenshot](https://github.com/shurcooL/Conception-go#screenshot), but it's
less than 10% finished at this point. Everything you see is rendered in
OpenGL. The text editing component has syntax and diff highlighting support.

It's written in Go, but I'm planning to have it running in the browser by
compiling Go to JS and using OpenGL bindings with two backends: WebGL and
OpenGL.

In terms of usability, it's nothing more than a complicated tech demo atm; I
need to figure out its future direction.

~~~
moron4hire
I thought I recognized your user name. I had looked at Conception a little
while ago. It's a neat project and I'm looking forward to seeing more of what
you do with it.

Yeah, I have written everything so far in plain JavaScript. I've been
considering something else, but all of the available options seem a tad...
monolithic.

If I'm going to not-javascript, then I think the answer is to go to something
that is completely type safe and static, instead. I'd really like to be able
to write-once-and-run-desktop-and-browser. I used to do C++, and now there is
Emscripten, but I'd really rather not get back into C++ again. Go looked
interesting, and there seems to already be a fair amount of work towards
transpiling to JS. Rust looks particularly interesting, especially with the
lack of implicit garbage collector, but from the little I've read, it seems
Emscripten doesn't work that well with it.

~~~
shurcooL
> If I'm going to not-javascript, then I think the answer is to go to
> something that is completely type safe and static, instead. I'd really like
> to be able to write-once-and-run-desktop-and-browser. I used to do C++, and
> now there is Emscripten, but I'd really rather not get back into C++ again.

I agree completely, about type safe, static types, and not wanting to get back
to the mess of C++ (header files, makefiles, ifdefs, complexity, etc.).

Which is why I think Go fits the bill so well.

> Go looked interesting, and there seems to already be a fair amount of work
> towards transpiling to JS.

There is indeed. I've already done quite a lot with it, but with smaller side
projects for now. That's where I gained the confidence and I will work towards
applying it to my main projects now.

I can link you to
[https://github.com/shurcooL/play/commit/e53557dd9c070ce0ec52...](https://github.com/shurcooL/play/commit/e53557dd9c070ce0ec5251108249e5fa85333ae0#commitcomment-9101168).
You can look at the latest code, it's all in a single main.go file, and it
runs great in the browser.

~~~
moron4hire
Awesome, I'll check it out. You may have just convinced me to pick up Go.

~~~
shurcooL
Glad to hear it! :)

Feel free to ping me with any questions you may run into (like what are best
packages to use, or anything else) and I'll happily help out!

------
billconan
I have been looking for a text editor implementation in webgl or canvas, and
this is cool. but still, this editor can't accept asian languages which
require an input method program.

~~~
moron4hire
Hi, thanks. Yes, I know it's not nice to people who need such things, and I
really would like to support them soon, but I was only able to get just so
much done in a month.

------
noiv
Sadly no umlauts, but the other alphanumeric keys are mapped correctly. Any
chance for non-English keyboard support?

~~~
moron4hire
Which keyboard are you using? It's impossible to accurately detect keyboard
layout in javascript, but I do provide a option to select keyboards.
Unfortunately, the only ones I've had time to implement so far are US QWERTY,
UK Extended QWERTY, FR AZERTY, and DEU QWERTZ.

There is a small bug that I haven't fixed yet that requires you to look away
from the editor to make the drop down lists on the instructions page work.

As for other languages, I have a tool at
[https://primroseeditor.com/keyboard_test.html](https://primroseeditor.com/keyboard_test.html)
that can put together the code pages that I use for this. It supports dead
keys for typing umlauts, but it can be a little fiddly to use. I've been using
the Windows on screen keyboard to make them, so I don't know how well it maps
to reality.

Unless you mean using alt codes to your Unicode characters directly, no, don't
have that feature yet. To the list!

~~~
noiv
It's a CodePages.DE_QWERTZ.

------
eatonphil
Every time I hit CMD+OPT+SPACE on my MBP a system finder window keeps popping
up. Did I miss something?

~~~
moron4hire
No, you didn't, I missed that CMD+OPT+SPACE is already used on OS X. I've
changed it to CMD+OPT+E now.

Between the OS and the browser, there aren't many friendly keyboard shortcuts
left.

------
TazeTSchnitzel
Man, if I ever make a WebGL MMO, I'd use this for the script editor.

~~~
moron4hire
Do it! Now is the time to get started. The WebVR community is very exciting.

------
whoisthemachine
Seems to not work in FF?

~~~
moron4hire
Hi, sorry I missed you earlier. Would you be able to provide more details as
to the nature of your difficulties? Does the JavaScript console show any
errors? What are your browser version and OS? Thanks.

------
hassaderpdole
Site down for me

~~~
moron4hire
I haven't yet figured out how to get a Node.js process to start back up after
the server has rebooted, and it looks like the traffic has been killed me a
couple of times.

~~~
yeldarb
We use forever for this:
[https://github.com/foreverjs/forever](https://github.com/foreverjs/forever)

forever -w start yourFile.js

That'll keep it up and going as a daemon and reboot it when files change :)

~~~
moron4hire
No, that's not the issue. I actually _am_ using forever. I'm not entirely sure
what the problem was, but I think the entire VPS was falling over, so when it
comes back there is nothing to kick off forever. It is fixed, now, though, by
letting Apache serve the static files. I'm not a sysadmin and I've never had
anywhere near this much traffic before.

~~~
yeldarb
Ah, perhaps setting up an @reboot cron job to kick off the forever process
would do the trick.

Also, setting up a CDN in front of your static files is actually much easier
than it sounds at first. You can just setup a Cloudfront distribution that
uses your domain as its source; that should take off a lot of the load.

