littlektframework / littlekt

A multiplatform WebGPU 2D game framework written in Kotlin. Build your own game engine on top.
https://littlekt.com
Apache License 2.0
321 stars 12 forks source link

Plan for WASM/JS? #211

Closed Its-Kenta closed 7 months ago

Its-Kenta commented 1 year ago

1.8.20-Beta introduces the new WASM backend. I've been playing around with it lately and it provides some great compilation speeds and provides easier interoperability with JS, faster application startup compared to Kotlin/JS and JavaScript and Improved application runtime performance compared to Kotlin/JS and JavaScript

Of course it will possibly be released in Kotlin 2.0, but would there be any consideration to move towards using it?

LeHaine commented 1 year ago

Definitely. Would be great to get it added. I haven't looked much into it or how much heavy lifting it will be but it is definitely worth trying to get working.

Its-Kenta commented 1 year ago

Surprisingly there isn't much that needs to be changed. You would need to change jsMain to wasmMain: https://kotlinlang.org/docs/whatsnew-eap.html#new-kotlin-wasm-target

It also supports webpack for test runs:

kotlin {
    @OptIn(org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl::class)
    wasm {
        compilations.all {
            kotlinOptions {
                freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn"
            }
        }
        binaries.executable()
        browser {
            commonWebpackConfig {
                devServer = (devServer ?: org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.DevServer()).copy(
                    open = mapOf(
                        "app" to mapOf(
                            "name" to "microsoft-edge", // "edge" 
                            "arguments" to listOf("--js-flags=--experimental-wasm-gc")
                        )
                    ),
                )
            }
        }
    }

    sourceSets {
        val wasmMain by getting
    }
}

"name" to "microsoft-edge", // "edge" <-- this requires to be changed by user to determine what browser they want to use, but it has to be one that supports WASM GC experimental. (so chrome/edge beta or firefox that allows it) But also "arguments" to listOf("--js-flags=--experimental-wasm-gc") need to be modified based on the browser.

and you can call JS interop e.g. webgl just as you do with JS right now.

 import org.khronos.webgl.ArrayBufferView
import org.khronos.webgl.WebGLObject
import org.khronos.webgl.WebGLRenderingContext

external class WebGLVertexArrayObject : WebGLObject
external class WebGLTransformFeedback : WebGLObject
external class WebGLActiveInfo
LeHaine commented 1 year ago

Awesome! Thanks for the example. I'll give it a whirl at some point hopefully in the coming days.

Its-Kenta commented 1 year ago

Is there any update on moving from Kotlin/JS to Kotlin/WASM so far?

LeHaine commented 1 year ago

Is there any update on moving from Kotlin/JS to Kotlin/WASM so far?

Hello,

The changes are in progress and should hopefully have it done within the next few days when I get a bit more time. I've linked the in-progress pull request to this issue.