zhobo63 / imgui-ts

JavaScript bindings for Dear ImGui using Emscripten and TypeScript, modularized with webpack
MIT License
32 stars 6 forks source link

Failed to run example: gl is null #6

Closed Traveller23 closed 8 months ago

Traveller23 commented 9 months ago

I created a simple webpack project and added the sample code to it. It compiled successfully, but when executing, the page went blank and I found the following error message in my browser's console:

Uncaught TypeError: Cannot read properties of null (reading 'COLOR_BUFFER_BIT')
    at Module.ClearBuffer (imgui_impl.ts:466:71)
    at _loop (index.ts:17:5)

Here is the entire contents of index.ts:

import {ImGui, ImGui_Impl} from '@zhobo63/imgui-ts'

let text: ImGui.ImStringBuffer = new ImGui.ImStringBuffer(128, 'input text');
let text_area: ImGui.ImStringBuffer = new ImGui.ImStringBuffer(128, 'edit multiline');

function _loop(time: number): void {
    ImGui_Impl.NewFrame(time);
    ImGui.NewFrame();
    ImGui.Begin("Hello");
    ImGui.Text("Version " + ImGui.VERSION);
    ImGui.InputText("Input", text);
    ImGui.InputTextMultiline("Text", text_area);
    ImGui.End();
    ImGui.EndFrame();
    ImGui.Render();

    ImGui_Impl.ClearBuffer(new ImGui.ImVec4(0.25, 0.25, 0.25, 1));
    ImGui_Impl.RenderDrawData(ImGui.GetDrawData());
    window.requestAnimationFrame(_loop);
}

window.addEventListener('DOMContentLoaded', async () => {
    await ImGui.default();

    ImGui.CHECKVERSION();
    ImGui.CreateContext();
    const io: ImGui.IO = ImGui.GetIO();
    ImGui.StyleColorsDark();
    io.Fonts.AddFontDefault();

    const canvas: HTMLCanvasElement = document.getElementById("canvas") as HTMLCanvasElement;
    ImGui_Impl.Init(canvas);
    window.requestAnimationFrame(_loop);
});

@zhobo63/imgui-ts version: 0.1.41 This is my project: demo.zip

How to reproduce:

# Download and unzip the demo project
npm install
npx webpack
# Open dist/index.html in your browser
zhobo63 commented 8 months ago

your index.html doesn't contain

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script>
</body>
</html>
Traveller23 commented 8 months ago

Thanks, I realized that was the reason too, but I forgot to reply.