Using Emscripten, I've been trying to compile the ImpulseEngine project by Randy Gaul (C++) to a JavaScript program. Once I got Emscripten running, I followed the tutorial described here. I followed all of the steps: Linking the .cpp files into the .bc files, then compiling those into a .js.
Here's a list of the commands I ran:
.cpp -> .bc:
emcc ImpulseEngine-master/main.cpp -o main.bc
emcc ImpulseEngine-master/Scene.cpp -o Scene.bc
emcc ImpulseEngine-master/Render.cpp -o Render.bc
emcc ImpulseEngine-master/Precompiled.cpp -o Precompiled.bc
emcc ImpulseEngine-master/Manifold.cpp -o Manifold.bc
emcc ImpulseEngine-master/Collision.cpp -o Collision.bc
emcc ImpulseEngine-master/Clock.cpp -o Clock.bc
emcc ImpulseEngine-master/Body.cpp -o Body.bc
.bc -> .js
emcc main.bc Scene.bc Render.bc Precompiled.bc Manifold.bc Collision.bc Clock.bc Body.bc -s LEGACY_GL_EMULATION=1 -o github/khanfusiion3.github.io/index.html
Note the -s LEGACY_GL_EMULATION=1 option: That's for enabling the OpenGL features. Granted, when I ran the command, I still received a few warnings about unresolved symbols, as seen here:
warning: unresolved symbol: glPointSize
warning: unresolved symbol: glRasterPos2i
warning: unresolved symbol: glutBitmapCharacter
warning: unresolved symbol: glutBitmap9By15
Theoretically, the program will fail now regardless of what happens next, but I tried anyways. It immediately threw an error and exited. Here is a list of every error logged to the console:
WARNING: using emscripten GL emulation. This is a collection of limited workarounds, do not expect it to work.Module.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1249 WARNING: using emscripten GL emulation unsafe opts. If weirdness happens, try -s GL_UNSAFE_OPTS=0Module.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1249 pre-main prep time: 12 msModule.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1249 WARNING: using emscripten GL immediate mode emulation. This is very limited in what it supportsModule.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1249 missing function: glRasterPos2iModule.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1237 -1
khanfusiion3.github.io/:1249 -1Module.printErr # khanfusiion3.github.io/:1249
khanfusiion3.github.io/:1249 warning: build with -s DEMANGLE_SUPPORT=1 to link in libcxxabi demanglingModule.printErr # khanfusiion3.github.io/:1249
/index.js:1879 Uncaught abort(-1) at Error
at jsStackTrace (http://khanfusiion3.github.io/index.js:1060:13)
at stackTrace (http://khanfusiion3.github.io/index.js:1077:22)
at abort (http://khanfusiion3.github.io/index.js:25065:44)
at _glRasterPos2i (http://khanfusiion3.github.io/index.js:8051:58)
at __Z12RenderStringiiPKc (http://khanfusiion3.github.io/index.js:13374:2)
at Array.__Z11PhysicsLoopv (http://khanfusiion3.github.io/index.js:9462:2)
at dynCall_v (http://khanfusiion3.github.io/index.js:24605:30)
at Object.Runtime.dynCall (http://khanfusiion3.github.io/index.js:331:39)
at http://khanfusiion3.github.io/index.js:8107:21
at Object.Browser.mainLoop.runIter (http://khanfusiion3.github.io/index.js:1873:13)
I also tried running it with the -s DEMANGLE_SUPPORT=1 option but the other errors didn't stop, so it still failed.
Any help on what's causing the errors and how to fix them?
ImpulseEngine is using OpenGL, which is a very complex API programs use to access graphics hardware through dedicated drivers. The drivers and the associated API are unavailable within the browser environment emscripten targets; you're not going to get it to work.
If you could find a similar library that targets SDL--a commonly-used library which provides a higher-level encapsulation of graphics APIs--you might port it to emscripten, since emscripten claims to support SDL. In this case emscripten would be providing the lower-level implementation of the SDL graphics calls, translating them to the appropriate javascript-compatible APIs.
Related
I am using Color JavaScript Library in my Code, And I Am Using Parcel JS for bundling my Code.
When I Am Running Parcel JS For Development Using This Command -
parcel public/index.html
Everything Works Fine.
But When I Build My Code For Production Using This Command -
parcel build public/index.html --public-url ./ --target browser
I Get This Error -
> neusprite#0.0.1 build
> parcel build public/index.html --public-url ./ --target browser
🚨 /home/aditya/Documents/Codes/NeuSprite/node_modules/color/index.js: Unexpected token name «_28», expected punc «,»
at Z.get (/home/aditya/Documents/Codes/NeuSprite/node_modules/terser/dist/bundle.min.js:1:525)
at Object.errorToJson (/home/aditya/Documents/Codes/NeuSprite/node_modules/#parcel/utils/src/errorUtils.js:9:20)
at Pipeline.process (/home/aditya/Documents/Codes/NeuSprite/node_modules/parcel-bundler/src/Pipeline.js:29:26)
at async Object.run (/home/aditya/Documents/Codes/NeuSprite/node_modules/parcel-bundler/src/worker.js:15:12)
at async Child.handleRequest (/home/aditya/Documents/Codes/NeuSprite/node_modules/#parcel/workers/src/child.js:60:26)
One thing to note is that when i use this following option --no-minify like this parcel build public/index.html --public-url ./ --target browser --no-minify it Just Works Fine.
On StackoverFlow I Found this Answer
UglifyJs does not support ES6. The error is very likely the method shorthand syntax.
But On The Parcel JS Documentation They Have Mentioned that they Use Terser
Parcel uses terser to minify JavaScript, cssnano for CSS, htmlnano for HTML, and svgo for SVG. If needed, you can configure these tools using a .terserrc, .cssnanorc, .htmlnanorc, or svgo.config.json config file. See the docs for JavaScript, CSS, HTML, and SVG for more details.
And Terser Clearly Mentions It is Suitable For ES6+ On Their GitHub Page.
A JavaScript parser and mangler/compressor toolkit for ES6+.
Then Why I Am I getting This Error?
I have tried for custom D3 Power BI ,but showing me below error .I also reinstall pbiviz and node but showing same error .Need little help.
I tried adding different version older but not got success.
my node version is v12.16.1. and pbiviz 3.1.10 Now
PS C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard> pbiviz package
info Building visual...
info Start preparing plugin template
info Finish preparing plugin template
Error parsing bundle asset "C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\drop\visual.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\webpack.statistics.prod.html
ERROR Failed to compile with 1 errors 10:43:12 PM
error in ./.tmp/precompile/visualPlugin.ts
Module build failed (from C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\precompile\visualPlugin.ts: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\Users\\mahendra\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\#babel\\preset-env\\lib\\index.js")
at getPlugin (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:67:11)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:62
at Array.map (<anonymous>)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:43
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\helper-plugin-utils\lib\index.js:19:12
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\config\full.js:199:14
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
at step (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
at evaluateAsync (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
at Function.errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
at errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:70:18)
at async (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
at onFirstPause (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
at Generator.next (<anonymous>)
# multi ./.tmp/precompile/visualPlugin.ts
error Package wasn't created. 1 errors found
warn Please, make sure that the visual source code matches to requirements of certification:
info Visual must use API v2.5 and above
info The project repository must:
info Include package.json and package-lock.json;
info Not include node_modules folder
info Run npm install expect no errors
info Run pbiviz package expect no errors
info The compiled package of the Custom Visual should match submitted package.
info npm audit command must not return any alerts with high or moderate level.
info The project must include Tslint from Microsoft with no overridden configuration, and this command shouldn’t return any tslint errors.
info https://www.npmjs.com/package/tslint-microsoft-contrib
info Ensure no arbitrary/dynamic code is run (bad: eval(), unsafe use of settimeout(), requestAnimationFrame(), setinterval(some function with user input).. running user input/data etc.)
info Ensure DOM is manipulated safely (bad: innerHTML, D3.html(<some user/data input>), unsanitized user input/data directly added to DOM, etc.)
info Ensure no js errors/exceptions in browser console for any input data. As test dataset please use this sample report
info Full description of certification requirements you can find in documentation:
info https://learn.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified#certification-requirements
I sorted out after long trial and error.
Here are the steps. First, manually install the problematic dependencies:
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
npm i #babel/plugin-proposal-numeric-separator
Second, go to file path in which the error is occurring (not in your code dir). In my case:
C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Note that this was found by examining the error message and noticing this line:
Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/index.js")
Finally, add the following lines to the file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)
"proposal-numeric-separator": _pluginTransformNumericSeperator (Add the dependency as a new export in the export object _default by adding a new key value pair)
Note that you may have to replace the path argument to require() with an absolute path to the location of #babel/plugin-proposal-numeric-separator in step 1 above if you are unable to resolve this during your next build.
Enjoy!
The root issue seems to be a problematic version of #babel/plugin-proposal-numeric-separator that powerbi-visuals-tools is depending on.
An alternative to the accepted solution is to install a working version of #babel/plugin-proposal-numeric-separator as a global dependency and then modify the powerbi-visuals-tools to use this instead of its packaged version. See steps below:
npm i -g #babel/plugin-proposal-numeric-separator
Locate the file that lists dependencies for the failing module. See the accepted answer for instructions, but it seems to be this path for Windows: <userDir>/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Add the following lines to this file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator"));
This imports our globally installed dependency: place anywhere above the definition of the export object _default
"proposal-numeric-separator": _pluginTransformNumericSeperator
Add the dependency as a new export in the export object _default by adding a new key value pair
You should now see the build succeed.
As a note, I'd generally avoid installing global dependencies like this. However, this may be the easiest workaround until the powerbi-visuals-tools package is updated to fix this issue. When this is done, I would recommend uninstalling the global dependency and reinstalling the powerbi-visuals-tools from scratch to undo our changes to the dependency file.
I'm trying to build openCv.js javascript library from opencv source code at this github repository
I followed instructions at this official page
I installed cmake, python, and Emscripten.
when I run this python command :
python ./platforms/js/build_js.py build_js
I get the following error :
-- Could NOT find PythonInterp: Found unsuitable version "2.7.13", but required
is at least "3.4" (found E:/Github projects/emsdk-master/python/2.7.13.1_64bit/p
ython-2.7.13.amd64/python.exe)
-- Could NOT find PythonInterp: Found unsuitable version "2.7.13", but required
is at least "3.2" (found E:/Github projects/emsdk-master/python/2.7.13.1_64bit/p
ython-2.7.13.amd64/python.exe)
CMake Error at cmake/OpenCVCompilerOptimizations.cmake:505 (message):
Compiler doesn't support baseline optimization flags:
Call Stack (most recent call first):
cmake/OpenCVCompilerOptions.cmake:261 (ocv_compiler_optimization_options)
CMakeLists.txt:554 (include)
screenshot of the error
how can I fix this error and build opencv.js ?
You need to update python version to be at least 3.4
I am trying to compile the BPG decoder in order to get a Javascript equivalent (yes, I know one is already provided by the author); this is done via Emscripten. Unfortunately, I get the following error:
emcc -Os -Wall -MMD -fno-asynchronous-unwind-tables -fdata-sections -ffunction-sections -fno-math-errno -fno-signed-zeros -fno-tree-vectorize -fomit-frame-pointer -D_FILE_OFFSET_BITS=64 -D_LARGEFILE_SOURCE -D_REENTRANT -I. -DCONFIG_BPG_VERSION=\"0.9.5\" -D_ISOC99_SOURCE -D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600 -DHAVE_AV_CONFIG_H -std=c99 -D_GNU_SOURCE=1 -DUSE_VAR_BIT_DEPTH -c -o libavutil/buffer.js.o libavutil/buffer.c
In file included from libavutil/buffer.c:22:
In file included from libavutil/atomic.h:29:
libavutil/atomic_gcc.h:54:12: error: cannot compile this atomic library call yet
return __atomic_add_fetch(ptr, inc, __ATOMIC_SEQ_CST);
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
ERROR root: compiler frontend failed to generate LLVM bitcode, halting
Makefile:202: recipe for target 'libavutil/buffer.js.o' failed
make: *** [libavutil/buffer.js.o] Error 1
Any ideas on how to solve it?
The issue was caused by the Emscripten compiler that comes with Ubuntu 14.10; I've upgraded and everything works now:
$ ./emcc -v
emcc (Emscripten GCC-like replacement + linker emulating GNU ld ) 1.29.0
clang version 3.4
A side note here is that I also needed a newer version of libpng.
My goal is to use LAPACK with Emscripten.
My question is: how to port LAPACK to JS? The are two ways I can think of: CLAPACK to JS where my question is: does anybody know an unofficial version that is later than 3.2.1? And the other way to think of is: how to port FORTRAN to JS?
Emscripten is capable of transforming C code to JavaScript. But unfortunately, LAPACK 3.5.0 (http://www.netlib.org/lapack/) is only available in FORTRAN95.
The CLAPACK project (http://www.netlib.org/clapack/) is basically what I want: a C version of LAPACK. But this one is outdated; the latest is 3.2.1.
F2C only works up to FORTRAN 77. LAPACK 3.5.0 was written in FORTRAN 95.
So my question now is: why is there no newer port of LAPACK to C?
The optimal way would be to directly transform the FORTRAN95 code of LAPACK to javascript with clang and emscripten. But I just don't know where to start.
Emscripten currently does not support FORTRAN. But it handles LLVM bitcode, so it should not be a problem to use clang to generate LLVM bc from a FORTRAN file.
For testing purpose, I have this file:
program hello
print *, "Hello World!"
end program hello
It compiles just fine with "clang hello.f -o hello -lgfortran". I am not capable of transforming this into valid bitcode.
clang -c -emit-llvm hello.f
clang -S -emit-llvm hello.f -o hello.bc -lgfortran
None of these approaches works, because emscripten keeps telling me
emcc -c hello.o -o hello.js
hello.o is not valid LLVM bitcode
I am not sure anyways if this would be even possible, because LAPACK obviously needs libgfortran to work. And I can't merge a library into javascript code...
Thanks in advance!
Edit:
I almost managed it to convert BLAS from LAPACK 3.5.0 to JS. I used dragonegg to accomplish this.
gfortran caxpy.f -flto -S -fplugin=/usr/lib/gcc/x86_64-linux-gnu/4.6/plugin/dragonegg.so
gfortran cgerc.f ...
...
After gaining LLVM bitcode from that:
emcc caxpy.s.ll cgerc.s.ll cher.s.ll ... -o blas.js -s EXPORTED_FUNCTIONS="['_caxpy_', ... , '_ztpsv_']"
But emscripten still leaves me with the following errors:
warning: unresolved symbol: _gfortran_st_write
warning: unresolved symbol: _gfortran_string_len_trim
warning: unresolved symbol: _gfortran_transfer_character_write
warning: unresolved symbol: _gfortran_transfer_integer_write
warning: unresolved symbol: _gfortran_st_write_done
warning: unresolved symbol: _gfortran_stop_string
warning: unresolved symbol: cabs
warning: unresolved symbol: cabsf
AssertionError: Did not receive forwarded data in an output - process failed?
The problem is that lgfortran is precompiled I think.
Thank you for your reply!
Indeed I did make progress on this. Finally it is working. I was very close, just follow these steps:
gfortran caxpy.f -S -flto -m32 -fplugin=dragonegg.so
mv caxpy.s caxpy.ll
llvm-as caxpy.ll -o caxpy.o
Note the "m32" flag which I missed earlier.
Warnings like
warning: unresolved symbol: _gfortran_st_write
can be ignored safely. Emscripten creates empty functions in the JavaScript file with this name so if these functions are not called at all there is no problem. If they get called you can easily substitute them with your own functions; the names are somewhat descriptive. Additionally you can have a look at the libgfortran source code (be aware it is GPL).
With this Emscripten source can be extended by hand to support Fortran files. Someday I may publish this on github!
I actually pulled this off recently (https://github.com/harveywi/arpack-js). The Github repo is mostly barren except for the output JS files, but I will be uploading source code, Makefiles, and other instructions soon. After wrangling unsuccessfully with dragonegg for a while, I found a different approach (not as great, but sufficient) which did the trick.
Here is roughly how I did it:
Download the ARPACK source code.
Run f2c on all of the Fortran files to convert them to C.
(This might be the trickiest part): Modify the Makefiles to use Emscripten and LLVM toolchains.
Make the project to produce an LLVM binary.
Use Emscripten again to transpile the LLVM binary to JS.