Stuck trying to run a webgl library with Kotlin/JS

JavaScript
1

Hi. I write opengl Kotlin code almost daily but I’m completely new to Kotlin/JS.

  1. I created a Kotlin/JS project in Idea without React. The hello world works fine.
  2. I added implementation(npm("pixi.js", "5.3.3", generateExternals = true)) to build.gradle.kts ; pixi.js is a webgl library developed in TypeScript.
  3. I ran dukat > generateExternals in gradle
  4. I wrote some simple Kotlin code:
import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.html.dom.append
import org.w3c.dom.Node

fun main() {
    window.onload = { document.body?.addPixi() }
}

fun Node.addPixi() {
    val app = PIXI.Application()
    val graphic = PIXI.Graphics()
    app.stage.addChild(arrayOf(graphic))
    graphic.lineStyle(3, 0xFF00FF)
    graphic.beginFill(0x00FFFF)
    graphic.drawCircle(0, 0, 100)
    graphic.endFill()
    append {
        app.view
    }
}

I get hundreds of errors in lib.dom.kt, most of them are of the type 'addEventListener' overrides nothing.

I don’t find in this forum mentions to either three.js or pixi.js, probably the most popular webgl libraries. Has anyone worked with them succesfully in Kotlin/JS?

Any tips on how to get it working? Or should I stick to JavaScript for now? Thank you :slight_smile:

2

There seems to be a solution for those working on three.js: Using Kotlin/JS to write THREE programs - #3 by Yokiano - Questions - three.js forum

3

VisionForge uses a full ThreeJs wrapper: https://github.com/mipt-npm/visionforge/tree/master/visionforge-solid/src/jsMain/kotlin/info/laht/threekt. Initial bindings were developed by @laht90 and were copied and somewhat fixed by me. You are free to use it. I do not intend to maintain separate wrappers right now, but if there is enough interest, and someone is willing to do so, we can move it to a separate project.

2 Likes