Webgl shader error 0

[hermann]

Continuation of

Import results in mime type error

Line: import fs_simple from '../glsl/fs-simple-basic.glsl' Gives error: Loading module from “http://localhost/somepath/glsl/fs-simple-basic.glsl” was blocked because of a disallowed MIME type (“application/octet-stream”). I have checked the permission, they seem to be ok. I have tried adding a .js at the end of the file like appears to be done in some other places. I have tried adding brackets around fs_simple. And googling a lot. How can I solve this mime type error?

I am porting code from book learnjs, 4th version.
Chapter 4.
Example: Shader Material Vertex.

You can see it here:
https://openage.org/it/samples/learn3js/ch/4/16/index.html
You can see the error,
it arises on line 89:
renderer.render(scene, camera)

I have been porting this code to work on my own server, without npm.

The main difference I have made is not use vite plugin glsl

Import results in mime type error

Line: import fs_simple from '../glsl/fs-simple-basic.glsl' Gives error: Loading module from “http://localhost/somepath/glsl/fs-simple-basic.glsl” was blocked because of a disallowed MIME type (“application/octet-stream”). I have checked the permission, they seem to be ok. I have tried adding a .js at the end of the file like appears to be done in some other places. I have tried adding brackets around fs_simple. And googling a lot. How can I solve this mime type error?

I think I have ported the glsl’s correctly.

The following is vs_simple:

export const vs_simple=`\
uniform float time;\
varying vec2 vUv;\
\
void main(){\
\
  vUv=uv;\
  vec3 posChanged=position;\
  posChanged.x=posChanged.x*(abs(sin(time*2.)));\
  posChanged.y=posChanged.y*(abs(sin(time*1.)));\
  posChanged.z=posChanged.z*(abs(cos(time*.5)));\
\
  gl_Position=projectionMatrix*modelViewMatrix*vec4(posChanged,1.);\
}\
`;  

And then I call it like this:

import { vs_simple } from '../glsl/vs-simple-basic.glsl.js'

Does anybody know why I’m getting the following error?

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Must have a compiled fragment shader attached:
SHADER_INFO_LOG:
ERROR: 0:33: 'main' : syntax error

FRAGMENT

ERROR: 0:33: 'main' : syntax error
..

[PavelBoytchev]

When I run the demo I can see the rest of the error message. See line 33 (in the error message), it is marked by >. There is missing ; after the definition of reoslution and before void main():

[hermann]

Yeah that is an error. Do you know where this file is? I’ve been checking in the three.module.js, but that doesn’t appear to be this.

[PavelBoytchev]

I don’t know. It might be in some of the shader chunks that are used to compose shaders. If you add an extra ; just before void main will it patch the error?

[hermann]

Don’t know because I can’t find the file.
I did:

grep -R 'linearToOutputTexel' .

In base directory of threejs, as well as in the project, but it returned nothing. Then did a few more grep attempts. I don’t know which file that is.

[PavelBoytchev]

It is defined in WebGLProgram.js. This function is constructed at run-time, it does not exist as a hard-coded definition. Line 693 activates the generation of the function:

getTexelEncodingFunction( 'linearToOutputTexel', parameters.outputEncoding ),

And in lines 67-72 the source of the function is generated as string:

function getTexelEncodingFunction( functionName, encoding ) {
	const components = getEncodingComponents( encoding );
	return 'vec4 ' + functionName + '( vec4 value ) { return LinearTo' + components[ 0 ] + components[ 1 ] + '; }';
}

[hermann]

I can find that file.

But in that file it appears like it is returning the semicolon allright.

Also, no matter what I add to the return string, doesn’t show up in the error command.

I changed the first part of the second line of the texel function in the following way:

return 'AAAAAAAAAAvec4 ' + functi..

But I don’t see any A’s in the error log.

[PavelBoytchev]

@hermann

I can find that file.

src/renderers/webgl/WebGLProgram.js

[PavelBoytchev]

@hermann

Also, no matter what I add to the return string, doesn’t show up in the error command.

I don’t know where you make the change, but if you change WebGLProgram.js there will be no effect, unless you rebuild three.module.js.

[hermann]

How do I do that?

[PavelBoytchev]

I have never needed to rebuild (or recompile) Three.js, and I have never done it. Maybe someone more experienced with that will help.

However, my intuition says that this is the wrong way to go.

You should not need to go that deep, unless there is a fundamental bug in Three.js, which is very unlikely. Most likely there is something wrong with the setup, or you are doing something manually, or something is misconfigured.

Also, check what Three.js version is used in the book. If it uses older version, it might have different files.

[PavelBoytchev]

As a proof that this is the wrong way, the missing semicolon is not in Three.js at all. The bug is in file:

https://openage.org/it/samples/learn3js/ch/4/glsl/fs-simple-basic.glsl.js, which is:

export const fs_simple=`\
uniform float time;\
uniform vec2 resolution\
\
void main(){\
  float c1=mod(time,.5);\
  float c2=mod(time,.7);\
  float c3=mod(time,.9);\
\
  gl_FragColor=vec4(c1,c2,c3,1.);\
 }\
`;

There is missing semicolon after resolution.

[hermann]

That’s so awesome man. Thanks. I derived that file from another.
It’s working now.

I should have used Sed to add those \ .

[PavelBoytchev]

You do not need \ at all if your multiline string is in ` (back quote)

You do need \ if your multiline string is in ’ (straight quote)

[hermann]

Or done that. yeah probably should have done that.