GLSL and emscripten - JavaScript and WebGL support (#92)

* add glm lib in vendor folder

* fix makefile

* add more help and context to emscripten readme

* add correct output parameter to emcc

* add how to restart the process to the readme

* simplify emscripten compilation

* apply patch

* fix blur shaders to work with WebGL

Author: axe312ger

src/libprojectM/Renderer/ShaderEngine.cpp

@@ -1154,7 +1154,7 @@ bool ShaderEngine::loadPresetShaders(Pipeline &pipeline, const std::string & pre
             ok = false;
         }
     }
-    
+
     if (!pipeline.compositeShader.programSource.empty()) {
         programID_presetComp = loadPresetShader(PresentCompositeShader, pipeline.compositeShader, pipeline.compositeShaderFilename);
         if (programID_presetComp != GL_FALSE) {
@@ -1184,10 +1184,10 @@ GLuint ShaderEngine::loadPresetShader(const ShaderEngine::PresentShaderType shad
 void ShaderEngine::disablePresetShaders() {
     if (presetCompShaderLoaded)
         glDeleteProgram(programID_presetComp);
-    
+
     if (presetWarpShaderLoaded)
         glDeleteProgram(programID_presetWarp);
-    
+
     presetCompShaderLoaded = false;
     presetWarpShaderLoaded = false;
 }
@@ -1246,10 +1246,10 @@ GLuint ShaderEngine::CompileShaderProgram(const std::string & VertexShaderCode,
     glCompileShader(FragmentShaderID);
     checkCompileStatus(FragmentShaderID, "Fragment: " + shaderTypeString);
 
-    
+
     // Link the program
     GLuint programID = glCreateProgram();
-    
+
     glAttachShader(programID, VertexShaderID);
     glAttachShader(programID, FragmentShaderID);
     bool linkOK = linkProgram(programID);

src/projectM-emscripten/Makefile.am

@@ -1,25 +1,25 @@
 AM_CPPFLAGS = \
 ${my_CFLAGS} \
 -include $(top_builddir)/config.h \
+-I$(top_builddir)/vendor \
 -DSYSCONFDIR=\""$(sysconfdir)"\" \
 -I${top_srcdir}/src/libprojectM \
 -I${top_srcdir}/src/libprojectM/Renderer \
 ${SDL_CFLAGS}
 
-REALSRCDIR=${top_srcdir}/src/projectM-sdl
-
-EMSCRIPTEN_FLAGS =  -s USE_SDL=2 -s USE_WEBGL2=1 -s WASM=0
+EMSCRIPTEN_FLAGS =  -s USE_SDL=2 -s USE_WEBGL2=1 
+# -s WASM=0
 
 bin_PROGRAMS = projectW.bc
-projectW_bc_SOURCES = $(REALSRCDIR)/pmSDL.cpp $(REALSRCDIR)/projectM_SDL_main.cpp $(REALSRCDIR)/pmSDL.hpp
+projectW_bc_SOURCES = ../libprojectM/KeyHandler.cpp projectM_SDL_emscripten.cpp
 projectW_bc_LDADD = ${SDL_LIBS}	${top_srcdir}/src/libprojectM/libprojectM.la
-projectW_bc_LDFLAGS = $(EMSCRIPTEN_FLAGS)
+projectW_bc_LDFLAGS = $(EMSCRIPTEN_FLAGS) -static
 projectW_bc_PROGRAM = projectW.bc
 
 projectW.html: generate-html
 
 generate-html:
-	emcc  ALLOW_MEMORY_GROWTH=1 $(EMSCRIPTEN_FLAGS) projectW.bc
+	emcc -s ALLOW_MEMORY_GROWTH=1 $(EMSCRIPTEN_FLAGS) projectW.bc -o projectW.html
 
 run: projectW.html
-	emrun projectW.html
+	emrun --browser chrome projectW.html

src/projectM-emscripten/README

@@ -1,27 +1,27 @@
 Running on the web.
 
-# Easy way:
-* `make run`
-
-
-
-
-# Hard way:
-
 ## Prepare
 * Activate the emsdk (https://github.com/juj/emsdk#installation-instructions)
-* make sure you are in the root directory of this project
-* on fresh repositories: `./autogen.sh`
+* Make sure you are in the root directory of this project
+* On fresh repositories: `./autogen.sh`
 
 ## Compile
-* `emconfigure ./configure --enable-emscripten --enable-gles --enable-sdl`
-* `emmake make -j4`
+* `emconfigure ./configure --enable-emscripten`
+* `emmake make`
 
 ## Create wasm & html files
 * `cd src/projectM-emscripten`
-* `emcc -s USE_SDL=2 -s ALLOW_MEMORY_GROWTH=1 projectW.bc -o projectW.html`
+* `make run`
+
+## Troubleshooting
+
+### General
+
+Want to restart the process after pulling or changing config?
+* `rm src/projectM-emscripten/projectW*`
+* restart with emconfigure or emmake
 
-Does not work? Try:
+### OS X troubleshooting:
 
-* `mkdir vendor && cp /usr/local/Cellar/glm/xx/include/glm ./vendor/`
-* `emmake make -j4 -lvendor`
+#### `./autogen.sh: line 3: autoreconf: command not found`
+fix via `brew install automake`

src/projectM-emscripten/projectM_SDL_emscripten.cpp

@@ -27,34 +27,36 @@ typedef struct {
     SDL_AudioDeviceID audioInputDevice;
 } projectMApp;
 
+projectMApp app;
+
 int selectAudioInput(projectMApp *app) {
     int i, count = SDL_GetNumAudioDevices(0);  // param=isCapture (not yet functional)
-    
+
     if (! count) {
         fprintf(stderr, "No audio input capture devices detected\n");
         return 0;
     }
-    
+
     printf("count: %d\n", count);
     for (i = 0; i < count; ++i) {
         printf("Audio device %d: %s\n", i, SDL_GetAudioDeviceName(i, 0));
     }
-    
+
     return 1;
 }
 
-void renderFrame(projectMApp *app) {
+void renderFrame() {
     int i;
     short pcm_data[2][512];
     SDL_Event evt;
-    
+
     SDL_PollEvent(&evt);
     switch (evt.type) {
         case SDL_KEYDOWN:
             // ...
             break;
         case SDL_QUIT:
-            app->done = true;
+            app.done = true;
             break;
     }
 
@@ -91,31 +93,30 @@ void renderFrame(projectMApp *app) {
     }
 
     /** Add the waveform data */
-    app->pm->pcm()->addPCM16(pcm_data);
+    app.pm->pcm()->addPCM16(pcm_data);
 
     glClearColor( 0.0, 0.5, 0.0, 0.0 );
 	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
-    app->pm->renderFrame();
+    app.pm->renderFrame();
     glFlush();
 
     #if SDL_MAJOR_VERSION==2
-        SDL_RenderPresent(app->rend);
+        SDL_RenderPresent(app.rend);
     #elif SDL_MAJOR_VERSION==1
         SDL_GL_SwapBuffers();
     #endif
 }
 
 int main( int argc, char *argv[] ) {
-    projectMApp app;
     app.done = 0;
 
     int width = 784,
         height = 784;
 
 
     SDL_Init(SDL_INIT_VIDEO | SDL_INIT_AUDIO);
-    
+
     // get an audio input device
     if (! selectAudioInput(&app)) {
         fprintf(stderr, "Failed to open audio input device\n");
@@ -149,7 +150,7 @@ int main( int argc, char *argv[] ) {
             return PROJECTM_ERROR;
         }
     #endif
-    
+
     #ifdef PANTS
     if ( fsaa ) {
         SDL_GL_GetAttribute( SDL_GL_MULTISAMPLEBUFFERS, &value );
@@ -159,8 +160,8 @@ int main( int argc, char *argv[] ) {
     }
     #endif
 
-    app.settings.meshX = 1;
-    app.settings.meshY = 1;
+    app.settings.meshX = 48;
+    app.settings.meshY = 32;
     app.settings.fps   = FPS;
     app.settings.textureSize = 2048;  // idk?
     app.settings.windowWidth = width;
@@ -173,13 +174,13 @@ int main( int argc, char *argv[] ) {
     app.settings.shuffleEnabled = 1;
     app.settings.softCutRatingsEnabled = 1; // ???
 #ifdef EMSCRIPTEN
-    app.settings.presetURL = "/build/presets";
+    app.settings.presetURL = "presets";
 #else
     app.settings.presetURL = "presets_tryptonaut";
     app.settings.menuFontURL = "fonts/Vera.ttf";
     app.settings.titleFontURL = "fonts/Vera.ttf";
 #endif
-    
+
     // init projectM
     app.pm = new projectM(app.settings);
     printf("init projectM\n");
@@ -188,6 +189,25 @@ int main( int argc, char *argv[] ) {
     app.pm->projectM_resetGL(width, height);
     printf("resetGL\n");
 
+    // Allocate a new a stream given the current directory name
+    DIR * m_dir;
+    if ((m_dir = opendir("/")) == NULL)
+    {
+        printf("error opening /\n");
+    } else {
+		
+		struct dirent * dir_entry;
+		while ((dir_entry = readdir(m_dir)) != NULL)
+		{
+			printf("%s\n", dir_entry->d_name);			
+		}
+	}
+
+
+    for(int i = 0; i < app.pm->getPlaylistSize(); i++) {
+        printf("%d\t%s\n", i, app.pm->getPresetName(i).c_str());
+    }
+
     // mainloop. non-emscripten version here for comparison/testing
 #ifdef EMSCRIPTEN
     emscripten_set_main_loop(renderFrame, 0, 0);

vendor/glm/CMakeLists.txt

@@ -0,0 +1,77 @@
+file(GLOB ROOT_SOURCE *.cpp)
+file(GLOB ROOT_INLINE *.inl)
+file(GLOB ROOT_HEADER *.hpp)
+file(GLOB ROOT_TEXT ../*.txt)
+file(GLOB ROOT_MD ../*.md)
+file(GLOB ROOT_NAT ../util/glm.natvis)
+
+file(GLOB_RECURSE CORE_SOURCE ./detail/*.cpp)
+file(GLOB_RECURSE CORE_INLINE ./detail/*.inl)
+file(GLOB_RECURSE CORE_HEADER ./detail/*.hpp)
+
+file(GLOB_RECURSE EXT_SOURCE ./ext/*.cpp)
+file(GLOB_RECURSE EXT_INLINE ./ext/*.inl)
+file(GLOB_RECURSE EXT_HEADER ./ext/*.hpp)
+
+file(GLOB_RECURSE GTC_SOURCE ./gtc/*.cpp)
+file(GLOB_RECURSE GTC_INLINE ./gtc/*.inl)
+file(GLOB_RECURSE GTC_HEADER ./gtc/*.hpp)
+
+file(GLOB_RECURSE GTX_SOURCE ./gtx/*.cpp)
+file(GLOB_RECURSE GTX_INLINE ./gtx/*.inl)
+file(GLOB_RECURSE GTX_HEADER ./gtx/*.hpp)
+
+file(GLOB_RECURSE SIMD_SOURCE ./simd/*.cpp)
+file(GLOB_RECURSE SIMD_INLINE ./simd/*.inl)
+file(GLOB_RECURSE SIMD_HEADER ./simd/*.h)
+
+source_group("Text Files" FILES ${ROOT_TEXT} ${ROOT_MD})
+source_group("Core Files" FILES ${CORE_SOURCE})
+source_group("Core Files" FILES ${CORE_INLINE})
+source_group("Core Files" FILES ${CORE_HEADER})
+source_group("EXT Files" FILES ${EXT_SOURCE})
+source_group("EXT Files" FILES ${EXT_INLINE})
+source_group("EXT Files" FILES ${EXT_HEADER})
+source_group("GTC Files" FILES ${GTC_SOURCE})
+source_group("GTC Files" FILES ${GTC_INLINE})
+source_group("GTC Files" FILES ${GTC_HEADER})
+source_group("GTX Files" FILES ${GTX_SOURCE})
+source_group("GTX Files" FILES ${GTX_INLINE})
+source_group("GTX Files" FILES ${GTX_HEADER})
+source_group("SIMD Files" FILES ${SIMD_SOURCE})
+source_group("SIMD Files" FILES ${SIMD_INLINE})
+source_group("SIMD Files" FILES ${SIMD_HEADER})
+
+include_directories(${CMAKE_CURRENT_SOURCE_DIR}/..)
+
+if(GLM_STATIC_LIBRARY_ENABLE OR GLM_DYNAMIC_LIBRARY_ENABLE)
+	if(GLM_STATIC_LIBRARY_ENABLE)
+		add_library(glm_static STATIC ${ROOT_TEXT} ${ROOT_MD} ${ROOT_NAT}
+			${ROOT_SOURCE}    ${ROOT_INLINE}    ${ROOT_HEADER}
+			${CORE_SOURCE}    ${CORE_INLINE}    ${CORE_HEADER}
+			${EXT_SOURCE}     ${EXT_INLINE}     ${EXT_HEADER}
+			${GTC_SOURCE}     ${GTC_INLINE}     ${GTC_HEADER}
+			${GTX_SOURCE}     ${GTX_INLINE}     ${GTX_HEADER}
+			${SIMD_SOURCE}    ${SIMD_INLINE}    ${SIMD_HEADER})
+	endif(GLM_STATIC_LIBRARY_ENABLE)
+
+	if(GLM_DYNAMIC_LIBRARY_ENABLE)
+		add_library(glm_shared SHARED ${ROOT_TEXT} ${ROOT_MD} ${ROOT_NAT}
+			${ROOT_SOURCE}    ${ROOT_INLINE}    ${ROOT_HEADER}
+			${CORE_SOURCE}    ${CORE_INLINE}    ${CORE_HEADER}
+			${EXT_SOURCE}     ${EXT_INLINE}     ${EXT_HEADER}
+			${GTC_SOURCE}     ${GTC_INLINE}     ${GTC_HEADER}
+			${GTX_SOURCE}     ${GTX_INLINE}     ${GTX_HEADER}
+			${SIMD_SOURCE}    ${SIMD_INLINE}    ${SIMD_HEADER})
+	endif(GLM_DYNAMIC_LIBRARY_ENABLE)
+
+else(GLM_STATIC_LIBRARY_ENABLE OR GLM_DYNAMIC_LIBRARY_ENABLE)
+	add_executable(glm_dummy ${ROOT_TEXT} ${ROOT_MD} ${ROOT_NAT}
+		${ROOT_SOURCE}    ${ROOT_INLINE}    ${ROOT_HEADER}
+		${CORE_SOURCE}    ${CORE_INLINE}    ${CORE_HEADER}
+		${EXT_SOURCE}     ${EXT_INLINE}     ${EXT_HEADER}
+		${GTC_SOURCE}     ${GTC_INLINE}     ${GTC_HEADER}
+		${GTX_SOURCE}     ${GTX_INLINE}     ${GTX_HEADER}
+		${SIMD_SOURCE}    ${SIMD_INLINE}    ${SIMD_HEADER})
+
+endif(GLM_STATIC_LIBRARY_ENABLE OR GLM_DYNAMIC_LIBRARY_ENABLE)