search

create3000 / x_ite

X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.
https://create3000.github.io/x_ite/
Other
67 stars 15 forks source link

Shaders don't work on localhost express server. Non-express remote works okay. Makes debugging difficult #93

Closed coderextreme closed 2 years ago

coderextreme commented 2 years ago

Describe the bug Shader not applied properly on localhost.

To Reproduce Steps to reproduce the behavior: Shading fails here: https://localhost:3000/src/main/html/x_iteflowers.xhtml Buts succeeds here: https://coderextreme.net/X3DJSONLD/src/main/html/x_iteflowers.xhtml

Expected behavior Shading applied on both sites

Screenshots image

image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

Running node app.js in X3DJSONLD. Recommend running npm install after removing postinstall from package.json file.

Network shows all URLs returned with status 200

One error in log stood out. This error also appeared on coderextreme.net page.

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Web console log for localhost (can't copy whole thing)

Welcome to X_ITE X3D Browser 4.7.3: Current Graphics Renderer Name: Google Inc. (NVIDIA) ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0, D3D11-30.0.14.9729) WebGL version: WebGL 2.0 (OpenGL ES 3.0 Chromium) Shading language: WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium) Rendering Properties Antialiased: true Depth size: 24 bits Color depth: 32 bits Max clip planes: 6 Max global lights: 4 Max textures: 2 Texture units: 32 Max texture size: 16384 × 16384 pixel Texture memory: NaN Max vertex uniform vectors: 4095 Max fragment uniform vectors: 1024 Max vertex attribs: 16

Welcome to X_ITE X3D Browser 4.7.3: Current Graphics Renderer Name: Google Inc. (NVIDIA) ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0, D3D11-30.0.14.9729) WebGL version: WebGL 2.0 (OpenGL ES 3.0 Chromium) Shading language: WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium) Rendering Properties Antialiased: true Depth size: 24 bits Color depth: 32 bits Max clip planes: 6 Max global lights: 4 Max textures: 2 Texture units: 32 Max texture size: 16384 × 16384 pixel Texture memory: NaN Max vertex uniform vectors: 4095 Max fragment uniform vectors: 1024 Max vertex attribs: 16

x_ite_dom.1.3.js:17 X_ITE XHTML DOM integration enabled x_ite.min.js:24 

   Couldn't load URL 'https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs': ShaderPart '': ERROR: 0:1: 'version' : #version directive must occur before anything else, except for comments and white space

ERROR: 0:6: 'in' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:7: 'in' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:20: 'out' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:21: 'out' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:22: 'out' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:23: 'out' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:24: 'out' : storage qualifier supported in GLSL ES 3.00 and above only

create3000 commented 2 years ago

If you load https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs, are there some random chars (whitespaces or so) before your #version directive?

coderextreme commented 2 years ago

Maybe there are caching issues? I don’t know if express does caching or not. This should be identical file:

https://coderextreme.net/X3DJSONLD/src/main/shaders/x_ite_flowers_chromatic.vs

Also a similar file can be checked on GitHub under coderextreme user, X3DJSONLD repository.

I did edit the files a couple of times today, removing #ifdef and promoting precision of float.

I’m a little unsure about networking since our router/modem is on the blink, and I’ve notice loading delays from the network. But I would think localhost would be okay. Would CORS possibly apply???

I’ll revisit this when I get back to my localhost to look at the browser network tab and response text. I have noticed XML parsing of shader files. Perhaps one can specify the content type one desires? I have a great express function for assigning content type to file extensions. See app.js under coderextreme’s X3DJSONLD GitHub repository (search for .vs and .fs or shader. I am not sure if content type has changed for shaders. That’s one thing to check.

John

On Tue, Jan 18, 2022 at 4:58 PM Holger Seelig @.***> wrote:

If you load https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs, are there some random chars (whitespaces or so) before your #version directive?

— Reply to this email directly, view it on GitHub https://github.com/create3000/x_ite/issues/93#issuecomment-1015908179, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFMJ53LKW5QFTX6AOOZS6TUWXV7XANCNFSM5MIH55LQ . You are receiving this because you authored the thread.Message ID: @.***>

coderextreme commented 2 years ago

This page indicates text/plain content type is correct for shaders, which is what I have. I have seen reference to text/plain being in the spec, but I haven’t looked at the Khronos spec.

https://stackoverflow.com/questions/28946976/mime-type-for-shader-code

Here is the express app.js:

https://github.com/coderextreme/X3DJSONLD/blob/master/app.js

Here is the shader file:

https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/shaders/x_ite_flowers_chromatic.vs

When I get to localhost, I will check server logs and request/reply in web dev tools.

Thanks for your assistance.

John

On Tue, Jan 18, 2022 at 5:16 PM John Carlson @.***> wrote:

Maybe there are caching issues? I don’t know if express does caching or not. This should be identical file:

https://coderextreme.net/X3DJSONLD/src/main/shaders/x_ite_flowers_chromatic.vs

Also a similar file can be checked on GitHub under coderextreme user, X3DJSONLD repository.

I did edit the files a couple of times today, removing #ifdef and promoting precision of float.

I’m a little unsure about networking since our router/modem is on the blink, and I’ve notice loading delays from the network. But I would think localhost would be okay. Would CORS possibly apply???

I’ll revisit this when I get back to my localhost to look at the browser network tab and response text. I have noticed XML parsing of shader files. Perhaps one can specify the content type one desires? I have a great express function for assigning content type to file extensions. See app.js under coderextreme’s X3DJSONLD GitHub repository (search for .vs and .fs or shader. I am not sure if content type has changed for shaders. That’s one thing to check.

John

On Tue, Jan 18, 2022 at 4:58 PM Holger Seelig @.***> wrote:

If you load https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs, are there some random chars (whitespaces or so) before your #version directive?

— Reply to this email directly, view it on GitHub https://github.com/create3000/x_ite/issues/93#issuecomment-1015908179, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFMJ53LKW5QFTX6AOOZS6TUWXV7XANCNFSM5MIH55LQ . You are receiving this because you authored the thread.Message ID: @.***>

create3000 commented 2 years ago

Have you tried an different localhost server software program? There is nothing special between localhost and a web address from the view of X_ITE. But the server app differs, app.js vs apache (mostly). That's why I think the localhost server app does not serve proper files. I have tried express server on my machine and it works properly with your example but I do not have a https localhost. Maybe it is the https?

coderextreme commented 2 years ago

Here's Edge snapshot. See selected vertex shader and response. I'm not seeing problems yet, Except for the rendering.

image

coderextreme commented 2 years ago

Does GLSL ES 3.0 contain "uniform"? Good thing to look up? I will do a wget on the localhost shader URL now. Ugh, wget is not installed. Will write a node.js client

I followed this to set up a self-signed certificate: https://medium.com/@nitinpatel_20236/how-to-create-an-https-server-on-localhost-using-express-366435d61f28 and I restarted my server, and this test script doesn't seem to work:

const https = require('https');

https.get('https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs', (res) => {
  console.log('statusCode:', res.statusCode);
  console.log('headers:', res.headers);

  res.on('data', (d) => {
    process.stdout.write(d);
  });

}).on('error', (e) => {
  console.error(e);
});
$ node test.js
Error: self signed certificate
    at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34)
    at TLSSocket.emit (node:events:390:28)
    at TLSSocket._finishInit (node:_tls_wrap:944:8)
    at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12) {
  code: 'DEPTH_ZERO_SELF_SIGNED_CERT'
}

So now I'm looking for how to set up a node.js client with a server that has a self-signed certificate

Here's the environment to set before and after node invocation:

export NODE_TLS_REJECT_UNAUTHORIZED='0'

That seems to work. Now I'll do a cat -tv to see extra characters. Yes, there are headers, I see. Modified client code:

const https = require('https');

https.get('https://localhost:3000/src/main/shaders/x_ite_flowers_chromatic.vs', (res) => {
  // console.log('statusCode:', res.statusCode);
  // console.log('headers:', res.headers);

  res.on('data', (d) => {
    process.stdout.write(d);
  });

}).on('error', (e) => {
  console.error(e);
});

New command and results:

node.exe test.js| cat -tv|head
(node:12856) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
#version 300 es^M
precision highp float;^M
^M
uniform mat4 x3d_ModelViewMatrix;^M
uniform mat4 x3d_ProjectionMatrix;^M
in vec3 x3d_Normal;^M
in vec4 x3d_Vertex;^M
^M
uniform vec3 chromaticDispertion;^M
uniform float bias;^M

So there does appear to be something before the #version.

Now I will go back to the browser. Same results in response:

image

Express server code:

https.createServer({
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem'),
  requestCert: false,
  rejectUnauthorized: false
}, app)
.listen(3000, 'localhost', function () {
  console.log('Example app listening on port 3000! Go to https://localhost:3000/')
})
coderextreme commented 2 years ago

Check out this screenshot (X_ITE shaders are encrypted/compressed?). Do I also need handling of my shaders serverside so they are encrypted/compressed? I will look at Networking on my remote site.

[image: image.png]

On Thu, May 5, 2022 at 12:14 PM Holger Seelig @.***> wrote:

Closed #93 https://github.com/create3000/x_ite/issues/93.

— Reply to this email directly, view it on GitHub https://github.com/create3000/x_ite/issues/93#event-6558224190, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFMJ53WOZEAT5K7IQDH4ZDVIP6WXANCNFSM5MIH55LQ . You are receiving this because you authored the thread.Message ID: @.***>