search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.56k stars 3.93k forks source link

Text component broken at master (src/shaders/sdf.js msdf.js) #5325

Closed nightgryphon closed 1 year ago

nightgryphon commented 1 year ago

Description:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@d817caf34be5e493a04b98e9fcb09adc76a7a691/dist/aframe-master.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-text position="-0.2 1.6 -1" value="test" color="#33C3F0"></a-text>
    </a-scene>
  </body>
</html>

Console error

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.
VERTEX

ERROR: 0:3: 'version' : #version directive must occur before anything else, except for comments and white space
ERROR: 0:4: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:5: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:8: 'out' : storage qualifier supported in GLSL ES 3.00 and above only

  1: #define SHADER_TYPE RawShaderMaterial
  2: #define SHADER_NAME 
> 3: #version 300 es
  4: in vec2 uv;
  5: in vec3 position;
  6: uniform mat4 projectionMatrix;

src/shaders/sdf.js and msdf.js define #version string within shader program BUT super-three src/renderers/webgl/WebGLProgram.js function WebGLProgram automatically adds prefix before defined shader program string. WebGLProgram can add version string if material.glslVersion set but it is not the case for text component material.

Material used in text component has to be fixed. Version string has to be removed from sdf/msdf shaders and glslVersion parameter has to be added to material.

dmarcos commented 1 year ago

1.4.2 seems to be working https://aframe.io/aframe/examples/test/text/

Maybe something related to THREE updates? PRs always welcome

nightgryphon commented 1 year ago

Yeah, 1.4.2 is ok. Trying to fix master right now. But that's a bit tricky as i new in nodejs, three, aframe, 3d modeling etc. while have some general programming skills... Just trying to make a little retrocomputing history VR scene %) Stuck at performance troubleshooting. Creating debug tools for VR as there is no console and such stuff in Oculus Quest2 browser...

vincentfretin commented 1 year ago

Just to let you know, there is also this PR related to the text component that update the three-bmfont-text dependency #5312 maybe it would be fixed there? If the error is not related to this package, please ignore my comment.

dmarcos commented 1 year ago

Yeah. to my knowledge that PR covers bounding box calculation. This issue looks like a shader compilation problem. Would be worth to bisect commits from 1.4.2 to current master to see when it broke. Can use the build links in the commits.

nightgryphon commented 1 year ago

seems i've found how to fix sdf/msdf shaders but something other goes wrong. testing. will try to made pull request when done https://github.com/nightgryphon/aframe-local/commit/57cae27860d67c04feb9ff2b0e19d478e6df8fb0

mrxz commented 1 year ago

Seems that this change in Three.js is the cause: https://github.com/mrdoob/three.js/pull/26101 Others faced the same and it seems the correct fix is indeed to not use #version 300 es in the shader code, but specify glslVersion

@nightgryphon You're change looks good. I'd just completely remove the #version 300 es lines instead of commenting them out and using THREE.GLSL3 instead of 300 es string literal. It might also be worth changing the default to 300 es as Three.js has deprecated WebGL 1 in r153 anyway, so it won't be around that much longer.

nightgryphon commented 1 year ago

I've just tried to keep the original functionality...

Sorry for off topic but right now i have trouble building aframe from repo. The resulting file is a few kb smaller than github one and VR part is broken. I'm doing:

dmarcos commented 1 year ago

To build npm run dist is correct. should generate both minimized and non-minimized builds. It's the same commands that the build bots uses.

FWIW, For local testing you don't need to generate builds. can do npm start and use the examples http://localhost:8080/

nightgryphon commented 1 year ago

It did but generated files have broken VR while ok at regular "flat" display. The world is randomly rotates around. 🤔 Prebuilt files from repo are ok so it seems i have trouble with my local tools or something.

I have apache running so npm run dist is fine

dmarcos commented 1 year ago

do npm start and examples work?

dmarcos commented 1 year ago

Yeah. to my knowledge that PR covers bounding box calculation. This issue looks like a shader compilation problem. Would be worth to bisect commits from 1.4.2 to current master to see when it broke. Can use the build links in the commits.

Unrelated but just merged the text component fixes described above

nightgryphon commented 1 year ago

Updated according to @mrxz recommendtions and added PR.

Though still unable to build by myself :( Has reinstalled and updated node/npm to latest but still getting broken builds which are about 2.5k smaller than official build. Seems to miss some piece or use wrong package while no errors during build. Some difference i've found is at @ungap/custom-elements code...

nightgryphon commented 1 year ago

@dmarcos plaese can you share package-lock.json for official aframe build?

nightgryphon commented 1 year ago

OHHH. it is not my build broken. All official builds starting from Jul3 also have this bug. Including example

nightgryphon commented 1 year ago

PR https://github.com/aframevr/aframe/pull/5328