# Sneak peek of Rayven

DevFeed: [Sneak peek of Rayven](<https://devfeed.tech/articles/sneak-peek-of-rayven-37355.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/sneak-peek-of-rayven/>)

Author: Stanko

Published: 2023-03-22T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Ray Tracing](<https://devfeed.tech/topics/ray-tracing.md>), [signed distance functions](<https://devfeed.tech/topics/signed-distance-functions.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [Rust](<https://devfeed.tech/topics/rust.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [article](<https://devfeed.tech/tags/article.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [ray-tracing](<https://devfeed.tech/tags/ray-tracing.md>), [rust](<https://devfeed.tech/tags/rust.md>), [signed-distance-functions](<https://devfeed.tech/tags/signed-distance-functions.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

A progress report on Rayven, an unfinished project that renders 3D scenes with hand-drawn-style hatching. The article describes its signed-distance-function renderer, ray tracing and vector rendering experiments, and the planned combination of a Rust engine compiled to WebAssembly with JavaScript scene scripting.

## Source excerpt

I would like to give you a preview of my new project that I'm really excited about - Rayven. It renders 3D scenes as if they were line-hatched by hand: I've had this idea for a while and after researching, I found three projects that became my inspiration: Michael Fogleman's ln, Kushiro's Hatch Lines Shader and Piter Pasma's Rayhatching. Finally, I decided to give it a try. Although it's far from finished, I want to share my progress. Once I'm satisfied with it, I plan to open-source it and write another post to show you under the hood. Meanwhile, I used it to create and plot these two drawings for Work&Co's tenth anniversary - version 1 and version 2 The first text render # The first step was to build a basic 3D renderer with objects defined as signed distance functions. It used text to render the scene and it was based entirely on Theia Vogel's great article. Better ray-tracing and the first vector renders # Then, I started improving the ray-tracing part. Articles by Inigo Quilez and Jamie Wong were immensely helpful. With proper ray-tracing in place, I began figuring out how to hatch a scene using vector lines. I started simple, using only vertical lines (image on the left). Then, I gradually worked my way to using vector fields (image on the right). Tweaking vector rendering # Once I had basic vector rendering in place, I spent a lot of time tweaking and experimenting. Here are some examples using lights, boolean operations, displacement, and different hatching options. In the first two images you can also see the raster output I'm using for debugging. Rust version # As you can imagine, the JavaScript version is not very performant. To speed up rendering, I decided to learn some Rust and port Rayven to it. Here are a few screenshots in the terminal, along with the SVG render at the end. Rust is fast, but it doesn't provide me with a short feedback loop, which is essential when I'm using Rayven to draw. On the other hand, JavaScript is slow, but being dynamic and