Shader not working after Github Export

Glitch Help
1

Hi there, I made this simple landing page by remixing the example for a-frame displacement shader. Works fine, but when I export it to my Github repo, the displacement shader stops working. I tried changing relative paths to absolute (tried both raw links and github pages format), but no luck. Any clues? I’m just getting started with js by learning a-frame.

Thank you all

2

That’s a cute effect!

What you have on glitch is an express server that uses browserify-middleware to convert the index.js from a server-side code to a browser compatible code, then serves it to the browser.

Github pages doesn’t do this conversion by default as far as I know, so you’d need to do a prior build step to convert the files before deploying them on github pages.

The docs in https://www.npmjs.com/package/browserify explain some of this.

You could likely setup Glitch to do the build step for you, in the package.json file.

3

I see, that’s beyond my powers at the moment, but I’ll keep reading. Thanks!

4

If Glitch allows that, that sounds like a simpler solution than using Travis. How should I go about it? Or where should I get started to figure it out? Thanks again

5

Hi @TheAlienRelative, did you get any further?

To get glitch to build the javascript, here is one approach …

On the console, create a directory called “bundle”

$ mkdir bundle

Modify package.json to have a build dependency …

  "devDependencies": {
    "browserify": "^16.5.0"
  },

browserify is already globally installed though, so the above might not be needed.

Also modify package.json so Glitch runs a script when the project is installing …

  "scripts": {
    "install": "browserify -t glslify client -o bundle/index.js",
    "start": "node server.js"
  },

That’s it, Glitch will create a new javascript file which should run in a browser.

Next steps are deploying to github and figuring out file paths.

2 Likes
6

Awesome! Both the commands for the new dir, and the script to install dependencies, are you adding them to package.json? Or you create a new .js file?

7

I edited the post to make it clearer :slight_smile:

8

Alright! I created a the bundle dir from the console, and this is how my package.json file looks like now (not sure if it matters where I insert the new code):

{

“name”: “@donmccurdy/aframe-shader-demo-1”,
“version”: “0.0.1”,
“description”: “What am I about?”,
“main”: “server.js”,
“scripts”: {
“install”: “browserify -t glslify client -o bundle/index.js”,
“start”: “node server.js”
},
“devDependencies”: {
“browserify”: “^16.5.0”
},
“dependencies”: {
“express”: “^4.16.4”,
“browserify-middleware”: “^8.1.1”,
“glslify”: “^7.0.0”,
“glsl-noise”: “^0.0.0”
},
“engines”: {
“node”: “6.10.x”
},
“repository”: {
“url”: “Glitch :･ﾟ✧”
},
“scripts”: {
“install”: “browserify -t glslify client -o bundle/index.js”,
“start”: “node server.js”
},
“license”: “MIT”,
“keywords”: [
“node”,
“glitch”,
“express”
]

}

After that a new index.js file was created in the bundle dir.
I exported the project to github, but still no luck. I do have now two index.js files tho (the original one in /client, and the new one in /bundle). It could be that the code is still referencing the old one? Where do I change that if that’s the case? I can’t any calls for it in the html file.

9

Looks like two “script” sections now, although probably works okay as they’re identical.

That’s great! Did you have a look at the new file? It should contain shims for require and include the gls stuff from the other two files.

What do you see as a result? Is the index.html loading okay?

The index.html references ./js/index.js, this works in Glitch because the express server has a route defined for /js.

Hmmm a way to have the same code working in github pages might be to build to the same folder as referenced in the html, i.e. rename the folder from bundle to js .

Console …

$ mv bundle js

package.json …

  "scripts": {
    "install": "browserify -t glslify client -o js/index.js",
    "start": "node server.js"
  },

Alternatively, create another index.html to be exported (yucky option of duplicating content).

Depending on how you are deploying to github pages (how?), ideally you wouldn’t deploy everything, just the html, css, and bundled js. I.e. it doesn’t need to know about express servers, etc.