# Stuck trying to run a webgl library with Kotlin/JS

**URL:** <https://discuss.kotlinlang.org/t/stuck-trying-to-run-a-webgl-library-with-kotlin-js/19349>\
**Category:** JavaScript\
**Created:** [September 30, 2020, 11:18am UTC](https://discuss.kotlinlang.org/t/stuck-trying-to-run-a-webgl-library-with-kotlin-js/19349 "2020-09-30T11:18:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![amidoh](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/amidoh/32/7656_2.png) [@amidoh](https://discuss.kotlinlang.org/u/amidoh)\
**Post date:** [September 30, 2020, 11:18am UTC](https://discuss.kotlinlang.org/t/stuck-trying-to-run-a-webgl-library-with-kotlin-js/19349/1 "2020-09-30T11:18:23Z")

</div>

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](https://github.com/pixijs/pixi.js) is a webgl library developed in TypeScript.
3. I ran `dukat > generateExternals` in gradle
4. I wrote some simple Kotlin code:

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![amidoh](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/amidoh/32/7656_2.png) [@amidoh](https://discuss.kotlinlang.org/u/amidoh)\
**Post date:** [September 30, 2020, 11:36am UTC](https://discuss.kotlinlang.org/t/stuck-trying-to-run-a-webgl-library-with-kotlin-js/19349/2 "2020-09-30T11:36:17Z")

</div>

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](https://discourse.threejs.org/t/using-kotlin-js-to-write-three-programs/17628/3)

---

<div class="post-metadata">

**Author:** ![darksnake](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/darksnake/32/2479_2.png) [@darksnake](https://discuss.kotlinlang.org/u/darksnake)\
**Post date:** [September 30, 2020, 11:48am UTC](https://discuss.kotlinlang.org/t/stuck-trying-to-run-a-webgl-library-with-kotlin-js/19349/3 "2020-09-30T11:48:51Z")

</div>

VisionForge uses a full ThreeJs wrapper: [https://github.com/mipt-npm/visionforge/tree/master/visionforge-solid/src/jsMain/kotlin/info/laht/threekt](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.