Lesson 5 not working locally - webgl

I am completely new to WebGL, and have been going through the examples at http://learningwebgl.com/blog/ . I copied the code in the lessons to a folder on my computer and got lessons 1 through 4 to work locally with Google Chrome, after downloading the JavaScript files glMatrix-0.9.5.min.js and webgl-utils.js. However, I am unable to get lessons 5 and 6 to work. In the case of lesson 5, I downloaded the file nehe.gif to the same folder with the HTML and JavaScript code, but it does not work. All I get is a black square instead of a spinning cube with text.
In the function initTexture() I added the line of code:
document.write("<img src='nehe.gif' />");
to check that the image containing the text is read, which it is, as it is displayed on the screen, but when this line is commented out, I get back to a black square.
The only changes I have made to the HTML code is to put <!DOCTYPE html> on the first line, and remove the two links and the tag in the body of the HTML code.
Lessons 1 through 4 work correctly with Google Chrome, but not with Internet Explorer or Firefox on my Windows computer, but I think that is beside the point, as lesson 5 does not work at all.
I would be most grateful if someone could kindly give me some advice as to how to get lesson 5 to work.

Chrome by default won't allow you to download texture images directly from the local filesystem.
See:
http://code.google.com/p/chromium/issues/detail?id=70088
http://code.google.com/p/chromium/issues/detail?id=57653
http://code.google.com/p/chromium/issues/detail?id=47416
http://code.google.com/p/chromium/issues/detail?id=31068
Some work-arounds:
a) Call chrome with --allow-file-access-from-files in the command-line.
b) Run a webserver locally to supply the textures for Chrome.
c) Use Firefox for examples with textures stored on the local filesystem.

Related

Can Codename One BrowserComponent show WebGL?

A premise, in case it makes any difference: I've deleted the CEF folder, since with it the BrowserComponent didn't work for me, and installed the ZuluFX Java 1.8 (with later versions, like ZuluFX 1.11, BrowserComponent didn't work either; this, on a side note, might be related to the same issue that has Cordova when one tries to work with Java > 8).
The problem: using BrowserComponent.setPage with a string, I can create, indeed, programmatically and on the fly, a html page which is properly shown.
When I use an example from BabylonJS (a string containng a html file which loads a cube, loaded as asset, and shows it: the html page -of course- works when loaded in a normal browser) nothing happens, at least in the simulator.
Before to start to make hypothesis (maybe the problem is in loading the cube; maybe in loading the scripts; maybe it can't work in simulators, but will work in the app; etc.) I'd like to know if BrowserComponent is supposed to work with WebGL.

Webpack url-loader PDF data URI link for Vue site stops working in iOS 14

I have a Vue.js website with a PDF file which is included in my ultimate javascript bundle via webpack. (It's my CV.) The following build and delivery process has worked perfectly fine for me since 2017, but suddenly stopped working in iOS 14:
Build the PDF with LaTeX.
Use webpack's url-loader to include the PDF in my webpack bundle as a base64 data URI.
Load that URL into a vuex data store, and then just deliver it as a link when clicked.
For the last three years, this has worked fine: I've been able to click on the link and get a working PDF. It's been kind of random and platform-specific whether the PDF opens in-browser or shows up in a download folder, and whether it gets the filename I've asked it to get or not, but, well, that doesn't matter to me. And the core functionality of click the link and get the PDF has worked on every browser and every platform I've ever tried it on.
All of a sudden, with iOS 14, it's stopped working. Now, when I try to activate the PDF link in iOS Safari, nothing happens at all. When I do it in iOS Chrome, it produces a little popup claiming it downloaded a document, but nothing seems to actually be able to open the document. And when I do it in iOS DuckDuckGo, it just displays the base64 data URI in the address bar.
Interestingly, if I take the dataURI that DDG displays in the address bar and copy and paste it into Safari or Chrome on iOS, it actually displays my pdf. So the browsers still have the capacity to display a PDF from a data URI. It just doesn't want to do so from my link.
And my site still works as expected on the desktop. Including in Safari on the desktop. Also, it still works on my wife's phone (she's still on iOS 13). So this is clearly something Apple changed in iOS 14. But what? And how to get my site working again?
I'm guessing that Apple has changed the behavior of the renderer in iOS in some fashion to cause it to break across browsers but nowhere else (since browsers in iOS are all still required to rely on webkit, right?)
This is a pretty important feature to me. I made this decision deliberately for perceived performance---combined with pre-rendering, everything on my site, including the PDF, loads very close to instantly from the user perspective. So I'd really like to keep it.
I'm using Webpack 2.6.1 and Vue 2.3.3. This is a stable build that has been working flawlessly for three years, so I haven't felt the need to update anything except for security updates.
After searching around, I did find this Apple dev discussion which suggests that in iOS 14, Apple newly blocks redirects to data URIs. But I'm not doing a redirect, I'm actually navigating directly to the URI through a link. And the linked discussion suggests that the newly banned behavior just brings Apple in line with what other browsers already ban---but my code works in every other browser, so that can't be it.
Relevant code, to the extent it matters (though it's so basic and obvious that I doubt a simple code fix will be the answer here):
from my webpack.base.js:
{
test: /\.(pdf)$/,
loader: 'url-loader'
},
from my vuex store, in state.js
import cvURL from './assets/pdf/gowdercv.pdf';
from the component containing the link that points to PDF:
<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>
which is loaded as a computed property to the component, i.e.,
computed: {
cvURL: function(){return this.$store.state.cvURL;},
Does anyone know how to get functionality back in iOS? Is there a workaround built in recent versions of webpack or vue for this? Thanks!
Update: after some help off SO, an acquaintance turned up this similar problem, which also came up with a solution: turning the base64 URI into a blob and passing that data url. Which also solves my problem. Though that SO doesn't have an accepted answer, so I can't vote to close my own question as a duplicate, alas.

test image src against ad blocker

I have a long list of image urls in my db.
Some of them ad-block detect the img's src as commercial and remove them.
I am looking for easy way to get the problematic images against ad-block regex list.
I've tried to a script to get all images to an html page, and hoped to run on chrome with adblock but got errors (Firefox as well) as they are too many.
My app build using Ruby on Rails.

Display offline html5 website

For my business I need to be able to show a potential client a website I generate with a program called Pano2VR, which is a virtual tour program. This program takes some panoramic photos linked with each other and can generate a virtual tour out of them (as example: www.casas-fotoart.de/virtualtours ). The output this App gives can be either HTML5, Flash or both (flash if available and html5 for mobile devices, for example).
I need to be able to show that on my iPad while offline. i haven't found any solution for that so I tried to build a easy App for that, which I thought it wouldn't be complicated.
I generated a html5-only virtual tour and I droped the output into the "Suporting Files" group on the Xcode project. I added a UIWebView and on viewDidLoad I set it so it loads the html file.
The files I'm droping are like these (these inside the ipad folder):
The html file loads into the webView, but it just displays "This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.", even though when loading these files from the net, it loads perfectly. I know this message comes from the html file.
Any idea on how to make it work will be much appreciated. Thanks in advance.
Your problem is this probably - XCode is mangling the JS files, I assume because it's trying to compile them

How can i turn a local website (directory on my PC) stored in a filder into a .webarchive file?

I have a full website html, css, images, javascripts and video on my local hardrive all contained in a folder.
the website works great on my PC but i need to transfer it to an iPad, i was thinking that this should be easy ... well its not since i cant just copy the site over and run it like on my PC.
so my next step was to try and make a .webarchive of the site but since it has a lot of jquery and video files i cant just use safari since it wont include any of the video files and so on.
was hoping someone knows of a tool or a method to convert a folder into a webarchive.
Just open the website over safari and then Save As... web archive.
My currently unsolved issue is exactly the reverse one.

Resources