# Kotlin-based shader language

**URL:** <https://openrndr.discourse.group/t/kotlin-based-shader-language/563>\
**Category:** Announcements\
**Created:** [June 3, 2023, 12:39pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563 "2023-06-03T12:39:03Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 3, 2023, 12:39pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/1 "2023-06-03T12:39:03Z")

</div>

![Signed Distance Fields GLSL code and the result side by side](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/113baf71255649cd5df93dc83337924b7a1d6e86.jpeg)

Edwin has been working on a Kotlin-based shader language. It is still in progress, including the syntax, but you can give it a try already 🙂

Here you can find over 10 examples written with that new syntax: [poc-shader-generation/orx-shader-generator/src/jvmDemo/kotlin at master · edwinRNDR/poc-shader-generation · GitHub](https://github.com/edwinRNDR/poc-shader-generation/tree/master/orx-shader-generator/src/jvmDemo/kotlin)

If you clone the repo you can run those demo programs and write your own.

It seems to include many [math and noise functions](https://github.com/edwinRNDR/poc-shader-generation/tree/master/orx-shader-generator/src/commonMain/kotlin/phrases).

 ![SDF example](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/4d0aeae30efc11b34f57b01f0e03806018e61049.png)

When I get a moment to try it I’m going to start from the simplest example: set a flat color, then use a uniform to change it over time, then move on from there. I am quite used to GLSL and it might take a bit of time to get used to a new syntax, although better auto-completion and type-checking sound very appealing.

So… anyone dares to try? Who can use it to draw a circle? 🙂

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 12, 2023, 6:53am UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/2 "2023-06-12T06:53:28Z")

</div>

Now there’s a README with useful information at

> <https://github.com/edwinRNDR/poc-shader-generation/blob/master/orx-shader-generator/README.md>

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 14, 2023, 5:21pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/3 "2023-06-14T17:21:08Z")

</div>

I started writing some simple examples (more advanced ones are in the repo):

## Plain color

 ![HelloWorld01-2023-06-14-19.05.34](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/66fa567829484de93eba56a06a62521a904ea82d.png)

```kotlin
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.shadeStyle
import org.openrndr.extra.shadergenerator.dsl.functions.symbol
import org.openrndr.extra.shadergenerator.dsl.shadestyle.fragmentTransform

fun main() {
    application {
        program {
            extend {
                drawer.clear(ColorRGBa.WHITE)
                drawer.shadeStyle = shadeStyle {
                    @Suppress("LocalVariableName")
                    fragmentTransform {
                        x_fill = ColorRGBa.PINK.toVector4().symbol
                    }
                }
                drawer.circle(drawer.bounds.center, 200.0)
            }
        }
    }
}

```

## Simple texture

 ![HelloWorld02-2023-06-14-19.02.02](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/89e07dde03f60920f7a6b1f3be03f8fa77cd4801.png)

```kotlin
import org.openrndr.application
import org.openrndr.draw.shadeStyle
import org.openrndr.extra.shadergenerator.dsl.functions.symbol
import org.openrndr.extra.shadergenerator.dsl.shadestyle.fragmentTransform
import org.openrndr.math.*

fun main() {
    application {
        program {
            extend {
                drawer.clear(ColorRGBa.WHITE)
                drawer.shadeStyle = shadeStyle {
                    @Suppress("LocalVariableName")
                    fragmentTransform {
                        val va_texCoord0 by parameter<Vector2>()
                        val r by sin(va_texCoord0.x * 15.0) * 0.5 + 0.5
                        val g by sin(va_texCoord0.y * 5.0) * 0.5 + 0.5
                        val c by Vector4(r, g, 1.0.symbol, 1.0.symbol)
                        x_fill = c
                    }
                }
                drawer.circle(drawer.bounds.center, 200.0)
            }
        }
    }
}

```

## Simple SDF ellipse

 ![HelloWorld02-2023-06-14-19.20.07](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/57c7749f41236a1667107802a964c535f01c98bc.png)

```kotlin
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.shadeStyle
import org.openrndr.extra.shadergenerator.dsl.functions.symbol
import org.openrndr.extra.shadergenerator.dsl.shadestyle.fragmentTransform
import org.openrndr.math.Vector2
import org.openrndr.math.Vector4

fun main() {
    application {
        program {
            extend {
                drawer.stroke = null
                drawer.shadeStyle = shadeStyle {
                    @Suppress("LocalVariableName")
                    fragmentTransform {
                        val va_texCoord0 by parameter<Vector2>()
                        val distToCenter = Vector2(va_texCoord0.x - 0.5, va_texCoord0.y - 0.5).length
                        val circle = smoothstep(0.3.symbol, 0.4.symbol, distToCenter)
                        val color0 = ColorRGBa.WHITE.toVector4().symbol
                        val color1 by Vector4(1.0, 0.5, 0.2, 1.0).symbol
                        x_fill = color0 * circle + color1 * (1.0 - circle)
                    }
                }
                drawer.rectangle(drawer.bounds)
            }
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![torb](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@torb](https://openrndr.discourse.group/u/torb)\
**Post date:** [June 19, 2023, 12:01pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/4 "2023-06-19T12:01:56Z")

</div>

This looks really cool! I’ve always been kinda scared of shaders/GLSL since it’s an entirely different language and I miss the comfortable IDE help I get with Kotlin.

Very smart to use delegated properties (_by_) to integrate stuff you need into a Kotlin environment. I’ve played around with using delegated properties to create a nice API for parameters that you can control with keyboard, mouse, midi, etc, but I never got around to finishing it.

Question: Does this change compute shaders not being available on Mac?

EDIT: typo

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 19, 2023, 1:55pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/5 "2023-06-19T13:55:29Z")

</div>

Hi @torb 👋

When you say `vectors` do you mean `GLSL`? 🙂

I’m curious about your API with delegated properties… I need to experiment with those too.

Latest additions to the Kotlin-based shading language are related to compute shaders. Unfortunately not yet for Mac. I hope those cross-platform (Vulkan) approaches make it possible at some point.

---

<div class="post-metadata">

**Author:** ![torb](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@torb](https://openrndr.discourse.group/u/torb)\
**Post date:** [June 20, 2023, 8:44am UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/6 "2023-06-20T08:44:46Z")

</div>

Hey! 🙂

> When you say `vectors` do you mean `GLSL` ? 🙂

Yeah I meant to write shaders!

> I’m curious about your API with delegated properties…

I should try to put them into a more tidy repo and share them. I suppose maybe they could fit into ORX or something?

> I need to experiment with those too.

They can be fun to work with. I have to say that in general Kotlin is the most fun programming language I’ve ever touched, and it’s a good fit for OPENRNDR since that adds to the fun, which I think is very important for creative coding as it’s a hobby for many of us.

> Latest additions to the Kotlin-based shading language are related to compute shaders. Unfortunately not yet for Mac. I hope those cross-platform (Vulkan) approaches make it possible at some point.

My impression is that Vulkan is so difficult that very few outside extremely hard core game developers actually like working with it directly. For example: openFrameworks haven’t adopted it either.

If we are to move to a new API my guess is that [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) is a better option. It should be noted that [native (i.e. non-web) implementations of WebGPU exist](https://github.com/gfx-rs/wgpu-native), including a [JVM-wrapper](https://github.com/kgpu/kgpu/tree/master/wgpuj). This means that you have the same GPU API across several native platforms and the web. None of this is very mature though, so unsure if it’s ready for prime time.

I think something like [ANGLE](https://github.com/google/angle) could be more interesting in short term. It re-implements OpenGL ES using Vulkan, Metal and DirectX backends. This means that we could just carry on as we already do yet retain support. I think maybe it could mean getting compute support for macOS too? I also think OpenGL ES is similar enough to WebGL that it’s a reasonable strategy for support web too (I suppose this is what OPENRNDR already does?).

Apologies if this reply is too off topic.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 21, 2023, 4:43pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/7 "2023-06-21T16:43:45Z")

</div>

There are so may approaches! It feels like

![](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/de184e871803beda437a344f7868723955934fd1.png)  
I think at some point it will happen. I hope newer versions of LWJGL and Kotlin will make it easy to run OPENRNDR on all desktops, mobiles and browsers with similar features.

Meanwhile, I think it can take years to experiment with everything that’s already available in OPENRNDR 🙂

---

<div class="post-metadata">

**Author:** ![torb](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@torb](https://openrndr.discourse.group/u/torb)\
**Post date:** [June 22, 2023, 8:59am UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/8 "2023-06-22T08:59:07Z")

</div>

Well, the thing with ANGLE is that it basically let you continue using OpenGL-API indefinitely. I think API stability over time is important and if you OPENRNDR went that route programs should just continue to work as-is.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [July 1, 2023, 2:33pm UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/9 "2023-07-01T14:33:32Z")

</div>

3 posts were split to a new topic: [Shadertoy to OPENRNDR shader converter](https://openrndr.discourse.group/t/shadertoy-to-openrndr-shader-converter/581)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [October 17, 2023, 10:01am UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/10 "2023-10-17T10:01:20Z")

</div>

I took a few minutes to generate screenshots of most demos in the [poc-shader-generation](https://github.com/edwinRNDR/poc-shader-generation) repo. Enjoy 🙂

**Signed Distance Fields**

 ![DemoSdf07-2023-10-17-11.12.07](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/e8e9c5d7542b83bb573f71e8c76f089c93de1853.png)  
 ![DemoSdf06-2023-10-17-11.10.20](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/db6313a8f6efacba964f30518660b6662154fe8e.png)  
 ![DemoSdf05-2023-10-17-11.08.47](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/e80829cf3c08de10bf551f56b2c55499ef5453cf.png)  
 ![DemoSdf04-2023-10-17-11.07.58](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/940c2c372aad8d77e13cc1162021bcd9d9c2f24f.png)  
 ![DemoSdf03-2023-10-17-11.07.28](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/f3be21753fe5bf08aacfc1590baff6c3d87a530a.png)  
 ![DemoSdf02-2023-10-17-11.06.38](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/68da06699aeb377defe81d4f5960826706076c0b.png)  
 ![DemoSdf01-2023-10-17-11.05.44](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/43525f146eae08bb34e0a197589c12ee263eca69.png)

**ComputeStyle**

 ![DemoComputeStyle05-2023-10-17-11.39.35](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/917d01022de45954b84783ae2746924bfb6ff466.png)  
 ![DemoComputeStyle04-2023-10-17-11.38.57](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/1a45894d2087223666a606abc569db7f758a7966.png)  
 ![DemoComputeStyle03-2023-10-17-11.38.07](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/e837fbf48f008f153cb57f8afba48e24feca1491.png)

**Other**

![DemoValueNoise01-2023-10-17-11.41.01](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/18e1ed8839d1ad001cd17f4b5f99ee5b603baf56.png)  
 ![DemoSimplePbr01-2023-10-17-11.40.45](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/78437212adc2fe0dcce306f32bbb8cb974cc5b19.png)  
 ![DemoShaderBuilder01-2023-10-17-11.39.55](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/58fbbe6fb113c7ae4203d58711fc497088d1b575.png)  
 ![DemoPerturb02-2023-10-17-11.12.59](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/09b3d0d4318bf6ba848938a2d870a623a2b5b0c4.png)  
 ![DemoPerturb01-2023-10-17-11.12.43](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/038144bf92a62365efe2596343cdcbff0517dab1.png)

 ![DemoLive01-2023-10-17_11-15](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/6c1208df1f76858ff6a5d5d10cd49f5b613c09df.png)  
 ![DemoHeightfield01-2023-10-17-11.18.46](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/ad90b23af51581a237725885e4dd56b1b12e8a55.png)  
 ![DemoFbm01-2023-10-17-11.19.42](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/c448b287ad4f1715a827c7da36a3d03a037dd4da.png)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [February 20, 2024, 11:35am UTC](https://openrndr.discourse.group/t/kotlin-based-shader-language/563/11 "2024-02-20T11:35:25Z")

</div>

Update: the repo has moved and can now be found at [GitHub - openrndr/orsl: A shader language in Kotlin DSL.](https://github.com/openrndr/orsl)