Build to Emscripten Problems Topic is solved

Problems building or running the engine, queries about how to use features etc.
Post Reply
Brick_man21
Gnoblar
Posts: 3
Joined: Sat Jan 21, 2023 5:24 pm

Build to Emscripten Problems

Post by Brick_man21 »

Ogre Version:13.6
Hello everyone I apologize immediately for my English. Can you tell me how to build a project for the web via Emscripten. I have already tried different options, but nothing works
If it's not difficult, you can describe the full algorithm of actions

User avatar
Cyberix3D
Gnoblar
Posts: 23
Joined: Tue Jan 17, 2023 10:25 pm
x 4
Contact:

Re: Build to Emscripten Problems

Post by Cyberix3D »

Hello,
I hope this answer will help you build ogre via Emscripten:

  1. Start by downloading and installing the latest version of Emscripten from the official website: https://emscripten.org/docs/getting_sta ... loads.html.
  2. Next, create a new directory for your build, for example, "build_web", within the ogre source directory.
  3. Open the Command Prompt and run the "emsdk_env.bat" file from the Emscripten installation directory.
  4. In the same Command Prompt, navigate to the "build_web" directory you created and run the following commands:

    Code: Select all

    emcmake cmake .. -DCMAKE_BUILD_TYPE=Release
    emmake make
    
    Good luck!
Brick_man21
Gnoblar
Posts: 3
Joined: Sat Jan 21, 2023 5:24 pm

Re: Build to Emscripten Problems

Post by Brick_man21 »

Cyberix3D wrote: Wed Feb 08, 2023 9:15 pm

Hello,
I hope this answer will help you build ogre via Emscripten:

  1. Start by downloading and installing the latest version of Emscripten from the official website: https://emscripten.org/docs/getting_sta ... loads.html.
  2. Next, create a new directory for your build, for example, "build_web", within the ogre source directory.
  3. Open the Command Prompt and run the "emsdk_env.bat" file from the Emscripten installation directory.
  4. In the same Command Prompt, navigate to the "build_web" directory you created and run the following commands:

    Code: Select all

    emcmake cmake .. -DCMAKE_BUILD_TYPE=Release
    emmake make
    
    Good luck!

Hi, thank you, I did it all, but now how can I connect it all to my project using cmke?

User avatar
Cyberix3D
Gnoblar
Posts: 23
Joined: Tue Jan 17, 2023 10:25 pm
x 4
Contact:

Re: Build to Emscripten Problems

Post by Cyberix3D »

First, check if the file "EmscriptenSample.html" has been generated in the "build_web/bin" directory.
You can run it in your browser by navigating to the "build_web/bin" directory in the command prompt, and executing the following command:

Code: Select all

python -m http.server 8000

Then, go to http://localhost:8000 in your browser and verify that the sample works.
If you want to make changes to the "EmscriptenSample" source code, you can modify it under the "ogre/Samples/Emscripten" directory and run "emmake make" again to see the changes.

To use Ogre as a library and connect it to your project, you must first install Ogre.
To do so, open the command prompt as an administrator, navigate to the "build_web" directory, and run:

Code: Select all

emmake make install

Next, follow the steps outlined in the Ogre documentation at
https://ogrecave.github.io/ogre/api/latest/setup.html
and configure your CMakeLists.txt file accordingly.

Finally, you can compile your project by creating a "build" directory within your project's directory and executing the following command:

Code: Select all

emcmake cmake ..
emmake make
Brick_man21
Gnoblar
Posts: 3
Joined: Sat Jan 21, 2023 5:24 pm

Re: Build to Emscripten Problems

Post by Brick_man21 »

Cyberix3D wrote: Thu Feb 09, 2023 5:00 pm

First, check if the file "EmscriptenSample.html" has been generated in the "build_web/bin" directory.
You can run it in your browser by navigating to the "build_web/bin" directory in the command prompt, and executing the following command:

Code: Select all

python -m http.server 8000

Then, go to http://localhost:8000 in your browser and verify that the sample works.
If you want to make changes to the "EmscriptenSample" source code, you can modify it under the "ogre/Samples/Emscripten" directory and run "emmake make" again to see the changes.

To use Ogre as a library and connect it to your project, you must first install Ogre.
To do so, open the command prompt as an administrator, navigate to the "build_web" directory, and run:

Code: Select all

emmake make install

Next, follow the steps outlined in the Ogre documentation at
https://ogrecave.github.io/ogre/api/latest/setup.html
and configure your CMakeLists.txt file accordingly.

Finally, you can compile your project by creating a "build" directory within your project's directory and executing the following command:

Code: Select all

emcmake cmake ..
emmake make

I have this error

Code: Select all

CMake Error at D:/OGRE/build_web/cmake/OGREConfig.cmake:33 (message):
  File or directory D://share/OGRE/Media referenced by variable
  OGRE_MEDIA_DIR does not exist !
Call Stack (most recent call first):
  D:/OGRE/build_web/cmake/OGREConfig.cmake:50 (set_and_check)
  CMakeLists.txt:12 (find_package)

Here is my CMake code

Code: Select all

cmake_minimum_required(VERSION 3.17)
project(ogre_web_app)

set(CMAKE_EXECUTABLE_SUFFIX ".html")
set(CMAKE_CXX_STANDARD 14)

set(PROJECT_NAME "ogre_web_app")
add_executable(${PROJECT_NAME} main.cpp)

set(OGRE_DIR "../build_web/cmake")

find_package(OGRE REQUIRED COMPONENTS Bites CONFIG)

target_li

Please tell me what to do. The Ogre Emscripten example is running. And I can't build my own project

User avatar
Cyberix3D
Gnoblar
Posts: 23
Joined: Tue Jan 17, 2023 10:25 pm
x 4
Contact:

Re: Build to Emscripten Problems

Post by Cyberix3D »

The error message indicates that the folder "D:\share\OGRE\Media" is missing.
To resolve this issue, you can create the folder and copy the contents of "ogre\Media" into it.

Additionally, it would be advisable to place the "find_package" command under the "project" command.
Also, remove the set(OGRE_DIR "../build_web/cmake"). It should be automatically configured to the ogre installation dir by the "find_package" command.

There also seem to be some missing elements in your CMakeLists.txt file for building with Emscripten.
To ensure all necessary components are present, you may want to compare your file to the example CMakeLists.txt file from the Emscripten project, which can be found at the following URL:
https://github.com/OGRECave/ogre/blob/m ... eLists.txt

User avatar
Cyberix3D
Gnoblar
Posts: 23
Joined: Tue Jan 17, 2023 10:25 pm
x 4
Contact:

Re: Build to Emscripten Problems

Post by Cyberix3D »

Here's an example of a CMakeLists.txt file for Ogre that works across multiple platforms. I hope this helps:

Code: Select all

cmake_minimum_required(VERSION 3.10.0)

project(Bootstrap)

# The COMPONENTS part checks that OGRE was built the way we need it
# The CONFIG flag makes sure we get OGRE instead of OGRE-next
find_package(OGRE REQUIRED COMPONENTS Bites RTShaderSystem CONFIG)

#get_cmake_property(_variableNames VARIABLES)
#foreach (_variableName ${_variableNames})
#    message(STATUS "${_variableName}=${${_variableName}}")
#endforeach()

#find_package(ZLIB REQUIRED)
add_library(ZLIB::ZLIB INTERFACE IMPORTED)
add_library(SDL2::SDL2 INTERFACE IMPORTED)

if (EMSCRIPTEN)
	link_directories(${OGRE_LIBRARY_DIRS})
	
set(MEDIA_DIR ${CMAKE_BINARY_DIR}/bin/media/)

set(CMAKE_EXECUTABLE_SUFFIX ".html")
set(CMAKE_EXE_LINKER_FLAGS "--preload-file ${MEDIA_DIR}/@. -s EXPORTED_FUNCTIONS=\"['_passAssetAsArrayBuffer', '_clearScene', '_main']\" -s USE_SDL=2 -s MAX_WEBGL_VERSION=2")

add_definitions(-s USE_SDL=2)

if(TRUE)
  set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s ASSERTIONS=1 -s DISABLE_EXCEPTION_CATCHING=0")
endif()
endif()
 
if (ANDROID)			
	set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${CMAKE_CURRENT_SOURCE_DIR}/CMake/Utils")
	set(OGRE_TEMPLATES_DIR "${CMAKE_SOURCE_DIR}/CMake/Templates")	
	set(PROJECT_SOURCE_DIR ${CMAKE_SOURCE_DIR})		
	
include(AndroidMacros)

add_ndk_cpufeatures_library()
add_ndk_native_app_glue_library()

include_directories(${PROJECT_SOURCE_DIR}/RenderSystems/GLSupport/include)
include_directories("${OGRE_INCLUDE_DIRS}")
include_directories("${OGRE_INCLUDE_DIRS}/Bites")
include_directories("${OGRE_INCLUDE_DIRS}/RTShaderSystem")
link_directories("${OGRE_LIBRARY_DIRS}")

set(SOURCE_FILES
  ${PROJECT_SOURCE_DIR}/Bootstrap.cpp)

add_library(Bootstrap SHARED ${HEADER_FILES} ${SOURCE_FILES} ${RESOURCE_FILES})
else()
	add_executable(0_Bootstrap Bootstrap.cpp)
endif()


 
if(ANDROID)
    target_link_libraries(Bootstrap OgreBites native_app_glue cpufeatures android c m dl z log EGL GLESv2 "-u ANativeActivity_onCreate")
    set_target_properties(Bootstrap PROPERTIES LINK_FLAGS -s) # strip symbols
else()
	target_link_libraries(0_Bootstrap OgreBites)
endif()

if (ANDROID)
    SET(ANDROID_MOD_NAME "Bootstrap")
    SET(NDKOUT "${CMAKE_BINARY_DIR}/BootstrapAndroid")
    SET(PKG_NAME "org.ogre.bootstrap")
    SET(HAS_CODE "false")
    SET(MAIN_ACTIVITY "android.app.NativeActivity")
    SET(HEADERS "")
    SET(SAMPLE_LDLIBS "")

copy_assets_to_android_proj()

file(MAKE_DIRECTORY "${NDKOUT}/app/src/main/jniLibs/${ANDROID_NDK_ABI_NAME}")
set_target_properties(Bootstrap PROPERTIES LIBRARY_OUTPUT_DIRECTORY "${NDKOUT}/app/src/main/jniLibs/${ANDROID_NDK_ABI_NAME}")
set_target_properties(Bootstrap PROPERTIES OUTPUT_NAME "Bootstrap")

create_android_proj(Bootstrap)
# this whole part should be simplified more
endif(ANDROID)

if (EMSCRIPTEN)
	file(COPY
		"${CMAKE_SOURCE_DIR}/Samples/Emscripten/media" 
		DESTINATION "${CMAKE_BINARY_DIR}/bin/")
		
file(COPY
	"${CMAKE_SOURCE_DIR}/Samples/Media/materials/textures/ribbonband.png"
	"${CMAKE_SOURCE_DIR}/Samples/Media/materials/textures/rockwall.tga"
	"${CMAKE_SOURCE_DIR}/Media/packs/SdkTrays.zip"
	"${CMAKE_SOURCE_DIR}/Samples/Media/packs/Sinbad.zip"
	DESTINATION ${MEDIA_DIR})

file(COPY
	"${CMAKE_SOURCE_DIR}/Media/RTShaderLib/GLSL"
	DESTINATION "${MEDIA_DIR}/RTShaderLib/")

file(COPY
	"${CMAKE_SOURCE_DIR}/Media/Main"
	DESTINATION "${MEDIA_DIR}/")
endif()

if (WIN32)
	file(GLOB dll_files "${OGRE_CONFIG_DIR}/*.dll")
	foreach(dll_file ${dll_files})
		file(COPY ${dll_file} DESTINATION ${CMAKE_BINARY_DIR})
	endforeach()		
endif()
Post Reply