Official forum of the Irrlicht Engine
https://irrlicht.sourceforge.io/forum/
If you are on Windows, I followed the steps like you would normally follow for the Linux build and it seems to work fine with a regular command prompt on Windows. I'll check the SDL outputs in a bitCuteAlien wrote:(but I can't rest right now as I'm on wrong OS)
No events seem to be outputted after uncommenting that line and rebuilding for Emscripten.CuteAlien wrote:Maybe enable the line with os::Printer::log in CIrrDeviceSDL::run() to see if you get any events.
Code: Select all
Target := Test
Sources := ../main.cpp
CPPFLAGS += -I../include/ -I../include/ext/ -I../include/Lua/ -I../ -I../../irrlicht-ogl-es/include/ -I../../libs/zlib-1.2.11 -I/usr/X11r6/include
CXXFLAGS += -g -Wall -fno-rtti -fstrict-aliasing -std=gnu++11 -U__STRICT_ANSI__
LDFLAGS += -s DEMANGLE_SUPPORT=1 -L../../irrlicht-ogl-es/lib/emscripten -lIrrlicht -lGL -lSDL --preload-file ../../irrlicht-ogl-es/media@/media -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=1 -s DISABLE_EXCEPTION_CATCHING=0 -s FULL_ES2=1 -D_IRR_EMSCRIPTEN_PLATFORM_
DESTPATH = bin/Test.html
all:
$(CXX) $(CPPFLAGS) $(CXXFLAGS) $(Sources) -o $(DESTPATH) $(LDFLAGS)
ifeq ($(HOSTTYPE), x86_64)
LIBSELECT=64
endif
ifeq ($HOSTTYPE), sun4)
LDFLAGS += -lrt
endifMouse doesn't hide, but it does print "event: #" while moving cursor, clicking, etc.CuteAlien wrote:Hm, so example works? Could be it does some mouse-cursor locking due to fps-camera (when it hides cursor maybe - but just guessing right now).
Code: Select all
#if defined(_IRR_EMSCRIPTEN_PLATFORM_)
if(!device->run())
{
emscripten_cancel_main_loop();
return;
}
#endifCode: Select all
<script type='text/javascript'>
var __appContextReady = false;
function resize(canvas) {
// Based on https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
// Lookup the size the browser is displaying the canvas in CSS pixels
// and compute a size needed to make our drawingbuffer match it in
// device pixels.
var realToCSSPixels = window.devicePixelRatio;
var displayWidth = Math.floor(canvas.clientWidth * realToCSSPixels);
var displayHeight = Math.floor(canvas.clientHeight * realToCSSPixels);
// Check if the canvas is not the same size.
if (canvas.width != displayWidth ||
canvas.height != displayHeight) {
// Make the canvas the same size
canvas.width = displayWidth;
canvas.height = displayHeight;
}
console.log("resize:" + canvas.width + "x" + canvas.height );
if ( __appContextReady ) {
console.log("cpp_code_resize_canvas" );
Module.ccall('cpp_code_resize_canvas', null, ['number', 'number'], [canvas.width, canvas.height]);
}
}
function onResize() {
console.log("onResize");
resize( document.getElementsByTagName('canvas')[0] );
}
function appContextReady() {
__appContextReady = true;
console.log("appContextReady");
resize( document.getElementsByTagName('canvas')[0] );
var projectId = 0; // set to 0 for choice with edit-box
Module.ccall('i4_set_project_id', null, ['number'], [projectId]);
}
</script>
Code: Select all
<body onresize="onResize()">
Code: Select all
preRun: (function() {
console.log("preRun");
onResize();
})(),
Code: Select all
#include <emscripten.h>
// Functions which can to be called from js/html
extern "C"
{
EMSCRIPTEN_KEEPALIVE void cpp_code_resize_canvas(int width, int height)
{
// Not my real code - as you have to get "driver" from somewhere here (involved more classes originally)
int w, h, fs;
emscripten_get_canvas_size(&w, &h, &fs);
const core::dimension2d<u32> canvasDim(w,h);
const core::dimension2d<u32> screenSize = driver->getScreenSize();
if ( w > 0 && h > 0) // going fullscreen w and h tend to be 0 sometimes -not sure yet how to handle this
{
//printf("w:%d h:%d screenW:%ud screenH:%ud \n", w, h, screenSize.Width, screenSize.Height);
if ( canvasDim != screenSize )
{
driver->OnResize(canvasDim);
driver->setViewPort(irr::core::rect<irr::s32>(0,0,w,h));
//env->getRootGUIElement()->setRelativePosition(irr::core::rect<irr::s32>(0,0,w,h));
//printf("setRelativePosition w:%d h:%d\n", w, h);
}
if ( smgr->getActiveCamera() )
{
irr::f32 aspect = (irr::f32)w / (irr::f32)h;
smgr->getActiveCamera()->setAspectRatio(aspect);
}
}
}
}
Code: Select all
EM_ASM( appContextReady() );
Code: Select all
import os, sys
from subprocess import call
from collections import OrderedDict
#########################################
#### MAKEFILE GENERATION ####
#########################################
#########################################
# Makefile generation information
properties = {
"emmake" : "C:\\emsdk\\emscripten\\1.38.9\\emmake.bat",
"debug": False,
"name": "IrrlichtExample",
"dest": "bin/",
"sources": {
"paths": [ "" ], # If you have .cpp files in another folder, could add "folder/" to compile the sources
"extensions": [ ".cpp", ".c" ]
},
"includes": {
"paths": [ "../../include/" ]
},
"CXXFLAGS": {
"debug": ["-O3"],
"release": ["-g", "-Wall"],
"all": ["-fstrict-aliasing", "-std=gnu++11", "-U__STRICT_ANSI__"]
},
"LDFLAGS": {
"debug": ["-O3"],
"release": ["-s", "DEMANGLE_SUPPORT=1"],
"all": ["-L../../lib/emscripten", "-lIrrlicht", "-lGL", "-lSDL", "--preload-file", "../../irrlicht-ogl-es/media@/media", "-s ALLOW_MEMORY_GROWTH=1", "-s NO_EXIT_RUNTIME=1", "-s DISABLE_EXCEPTION_CATCHING=0", "-s FULL_ES2=1", "-s EXTRA_EXPORTED_RUNTIME_METHODS=\"['ccall']\""]
# "-s WEBSOCKET_URL=\"wss://\""] # Uncomment to use https:// instead of http://
},
"defines": ["-D_IRR_EMSCRIPTEN_PLATFORM_"]
}
# Get properties based on if the application is being built for Release or Debug mode
def getDebugReleaseProperties(property):
lst = []
if properties["debug"]:
for flag in properties[property]["debug"]:
lst.append(flag)
else:
for flag in properties[property]["release"]:
lst.append(flag)
for flag in properties[property]["all"]:
lst.append(flag)
return lst
# Grab all of the source files
sources = ""
for path in properties["sources"]["paths"]:
files = os.listdir(path)
for file in files:
# Make sure the file has the correct extension
inExtensions = False
for extension in properties["sources"]["extensions"]:
if file[0-(len(extension)) : ] == extension:
inExtensions = True
break
if inExtensions:
sources += path + file + " "
sources = sources[ : -1]
# Append the source files together into a string
includes = ""
for path in properties["includes"]["paths"]:
includes += "-I" + path + " "
includes = includes[ : -1]
# Append the flags together into a string
CXXFLAGS = ""
for flag in getDebugReleaseProperties("CXXFLAGS"):
CXXFLAGS += flag + " "
CXXFLAGS = CXXFLAGS[ : -1]
# Append the flags together into a string
LDFLAGS = ""
for flag in getDebugReleaseProperties("LDFLAGS"):
LDFLAGS += flag + " "
for define in properties["defines"]:
LDFLAGS += define + " ";
LDFLAGS = LDFLAGS[ : -1]
# Generate the Makefile output
output = \
"Target := " + properties["name"] + "\n" + \
"Sources := " + sources + "\n" + \
"CPPFLAGS += " + includes + " -I/usr/X11r6/include" + "\n" + \
"CXXFLAGS += " + CXXFLAGS + "\n" + \
"LDFLAGS += " + LDFLAGS + "\n" + \
"DESTPATH = " + properties["dest"] + properties["name"] + ".html" + "\n" + \
"all:" + "\n" + \
" $(CXX) $(CPPFLAGS) $(CXXFLAGS) $(Sources) -o $(DESTPATH) $(LDFLAGS)"+ "\n" + \
"" + "\n" + \
"ifeq ($(HOSTTYPE), x86_64)" + "\n" + \
"LIBSELECT=64" + "\n" + \
"endif" + "\n" + \
"ifeq ($HOSTTYPE), sun4)" + "\n" + \
"LDFLAGS += -lrt" + "\n" + \
"endif"
f = open("Makefile", "w")
f.write(output)
f.close()
# Now run emmake make all
call("emmake make all", shell=True)
#########################################
#### HTML MODIFICATIONS ####
#########################################
#########################################
htmlFileName = properties["dest"] + properties["name"] + ".html"
htmlLines = open(htmlFileName, "r")
htmlLines = htmlLines.readlines();
# Finds the beginning and end lines as well as beginning and end position of an HTML tag.
# If endTag starts with two spaces " ", then we make sure the endTag is on it's own line
# May need to change this in the future, but for now it's a simple fix without having
# a bracket counter.
def findTag(tag, endTag="", beg=0, end=-1):
if endTag == "":
endTag = tag[0] + "/" + tag[1 :]
if end == -1:
end = len(htmlLines)
endIsOnItsOwnLine = False
if endTag.find(" ") == 0:
endTag = endTag[2:]
endIsOnItsOwnLine = True
foundBeg = -1
foundBegPos = -1
foundEnd = -1
foundEndPos = -1
for i in range(len(htmlLines)):
line = htmlLines[i]
if foundBeg == -1 and line.find(tag) >= 0:
foundBeg = i
foundBegPos = line.find(tag) + len(tag)
if foundBeg >= 0 and foundEnd == -1 and line.find(endTag) >= 0 and (endIsOnItsOwnLine== False or line.strip().find(endTag) == 0):
foundEnd = i
foundEndPos = line.find(endTag)
if foundBeg >= 0 and foundEnd >= 0:
break
if foundBeg >= 0 and foundEnd >= 0:
return foundBeg, foundBegPos, foundEnd, foundEndPos
return -1
# Replaces the contents of a tag
def setTag(tag, newVal, endTag=""):
data_ = findTag(tag, endTag)
if data_ == -1:
return
if data_[0] == data_[2]:
htmlLines[data_[0]] = htmlLines[data_[0]][:data_[1]] + newVal + htmlLines[data_[2]][data_[3]:]
else:
spacing = ""
for c in htmlLines[data_[0]]:
if c.isspace():
spacing += c
else:
break
htmlLines[data_[0]] = htmlLines[data_[0]][:data_[1]] + "\n"
for i in range(data_[2]-1, data_[0], -1):
del htmlLines[i]
newLinePos = data_[2]-(data_[2]-data_[0])+1 # We del lines, so the new pos after deletion
if len(newVal) > 0:
newVal = spacing + "\t" + newVal + "\n"
htmlLines[newLinePos] = newVal + spacing + htmlLines[newLinePos][data_[3]:]
# Removes a tag
def removeTag(tag, endTag):
data_ = findTag(tag, endTag)
if data_ == -1:
return
for i in range(data_[2], data_[0]-1, -1):
del htmlLines[i]
# Adds a javascript source.
# Probably needs to be re-implemented. This was just a super easy way to handle it.
def addScript(script):
data_ = findTag("<script type='text/javascript'>", "</script>")
if data_ == -1:
return
onLine = 0
for line in script:
htmlLines.insert(data_[0]-1+onLine, line + "\n")
onLine += 1
# Sets the application title.
setTag("<title>", "Irrlicht Example", "</title>")
# Removes the Emscripten border.
setTag("div.emscripten_border {", "border-width: 0px none;", "}")
# Makes the Emscripten canvas cover the entire browser window.
setTag("canvas.emscripten { border: 0px none;", "position: absolute; top: 0px; left: 0px; margin: 0px; width: 100%; height: 100%; overflow: hidden; display: block; background-color: transparent;", "}")
# Remove the Emscripten logo
setTag("#emscripten_logo {", "visibility: hidden;", " }")
# Remove the Emscripten loading spinner
setTag(".spinner {", "visibility: hidden;", " }")
# Remove unnecessary stuff
removeTag("@-webkit-keyframes rotation {", " }")
removeTag("@-moz-keyframes rotation {", " }")
removeTag("@-o-keyframes rotation {", " }")
removeTag("@keyframes rotation {", " }")
setTag("#status {", "", " }")
setTag("#progress {", "visibility: hidden;", " }")
setTag("#controls {", "visibility: hidden;", " }")
setTag("#output {", "visibility: hidden;", " }")
# Remove the Emscripten link
removeTag("<a href=\"http://emscripten.org\">", "</a>")
# Allow the window to be told when it is resized
setTag("preRun: ", "( function() { console.log(\"preRun\"); onResize(); } )()", ",")
setTag("<body", " onresize=\"onResize()\"", ">")
# Script to call the C++ resize function
addScript(
[" <script type='text/javascript'>",
" var __appContextReady = false;",
"",
" function resize(canvas) {",
" var realToCSSPixels = window.devicePixelRatio;",
" var displayWidth = Math.floor(canvas.clientWidth * realToCSSPixels);",
" var displayHeight = Math.floor(canvas.clientHeight * realToCSSPixels);",
"",
" // Check if the canvas is not the same size.",
" if (canvas.width != displayWidth ||",
" canvas.height != displayHeight) {",
"",
" // Make the canvas the same size",
" canvas.width = displayWidth;",
" canvas.height = displayHeight;",
" }",
" console.log(\"resize:\" + canvas.width + \"x\" + canvas.height );",
" if ( __appContextReady ) {",
" console.log(\"cpp_code_resize_canvas\" );",
" Module.ccall('cpp_code_resize_canvas', null, ['number', 'number'], [canvas.width, canvas.height]);",
" }",
" }",
"",
" function onResize() {",
" console.log(\"onResize\");",
" resize( document.getElementsByTagName('canvas')[0] );",
" }",
"",
" function appContextReady() {",
" if ( __appContextReady == false ) { // Was giving me problems without this. Probably needs to be looked at again.",
" __appContextReady = true;",
" console.log(\"appContextReady\");",
" resize( document.getElementsByTagName('canvas')[0] );",
"",
" var projectId = 0; // set to 0 for choice with edit-box",
" // Module.ccall('i4_set_project_id', null, ['number'], [projectId]); // i4_set_project_id doesn't exist for me. Removing it still works fine though",
" }",
" }",
" </script>"
]
)
newCont = ""
for line in htmlLines:
newCont += line
# Overwrite the HTML file with our new HTML contents
f = open(htmlFileName, "w")
f.write(newCont)
f.close()