0

I have a webgl application, where I am loading textures like this:

var Texture2D = function(gl, mediaFileUrl) {
  mediaFileUrl = "../" + mediaFileUrl; //This is the line which not works
  this.mediaFileUrl = mediaFileUrl;
  this.glTexture = gl.createTexture();
  this.image = new Image();
  var theTexture = this;
  this.image.onload = function() { theTexture.loaded(gl); } // Never gets called
  this.image.src = mediaFileUrl;
};

If I have the textures in the parent directory somewhere in the file system, it does not work, but if I have my file in one of the child directories ( So not using ../) it works.

File structure looks like this [index.html - texture.png] - Same folder = works

[index.html - ../texture.png] - Parent dir = not works

Any ideas how to solve this?

Update: It now works on chrome, but not in Firefox, which is very strange. In Firefox if I turn on the "anonymous" flag (image.crossOrigin = "anonymous") , it cannot load the image, if I turn off then I get a security error. (Error: WebGL warning: texImage2D: Cross-origin elements require CORS)

Ryper
  • 338
  • 3
  • 15
  • Use a simple server: Try [Servez](http://greggman.github.io/servez/). There are [also others](http://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-http-server-or-simplehttpserver/37179299) – gman May 19 '17 at 06:31

1 Answers1

0

For security restrictions you need to load the file from a server http(s):// instead of using file:// So you will need to run a local server in your project in order to test locally.

An alternative is to start chrome with the flags to turn off security restrictions: allow-file-access-from-files

mika
  • 1,411
  • 1
  • 12
  • 23
  • I am using Firefox, this way I don't need that flag, also the texture loading works, but if I use "../" in relative path, it does not work – Ryper May 17 '17 at 21:54
  • Try setting the `` tag on your page then: https://www.w3schools.com/tags/tag_base.asp – mika May 17 '17 at 21:57
  • In my point of view, can only be used if I am using like a web server. But I want to use it anywhere locally. Update: the image's onerror() function never gets called, so I think the picture is loaded, but webgl does't like relative paths? – Ryper May 17 '17 at 22:09
  • I got the following error after some tries: Error: WebGL warning: texImage2D: Cross-origin elements require CORS. I found another article about this, they said that I should set the image.crossOrigin to "anonymous", but then the image's onerror functions gets called, and know the webgl throws the security error – Ryper May 17 '17 at 22:19
  • Update: It now works on chrome, but not in Firefox, which is very strange. (in both ways) in Firefox if I turn on the "anonymous" thing, it cannot load the image, if I turn off then I get a security error – Ryper May 17 '17 at 22:24