GLB and different shader - no texture, black color

Questions
1

Hello,

i’ve have a simple shader that i wanted to add to a loaded glb-object.
Loading works and all but the object stays black. (When i set a Color in the shader it Shows it in that Color).
Now… i was looking around on this page too to find a solution. And i found this thread:
Unable to apply texture to shader material
But i also only see a black square here!
I even copied it locally to my pc and tried it in case the Image didn’t load or something.

So my Questions are:
First: Is there a Problem with my browser or something?
(I get a diffrent result in white with some flickering colors on it, if i just give a random Name to the uniform that is not declared).

2nd: If i load a GLB and want to add a custom shader, does it load all the textures into the new shader(if the uniform names are correct). See JS-Code below. If that is not the case what would be te correct strategy?

3rd: What is the fastest and best way to replace the “Standard”-Shader for everything? This is actually the main goal. There is some stuff i have to remove or at least change.

If someone can help me with this i will be forever grateful!

JS-Code:

var stdShader = THREE.ShaderLib[ 'standard' ];
var uniforms = THREE.UniformsUtils.clone( stdShader.uniforms );
var vS =
`varying vec2 vUv;
void main()
{
	vUv = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}`;

	var fS =
	`uniform sampler2D map;
	varying vec2 vUv;
	void main()
	{
		gl_FragColor = texture2D(map, vUv) + vec4(0.5, 0.5, 0.5, 1.0);
	}`;
	var material = new THREE.ShaderMaterial({
		uniforms: uniforms,
		vertexShader: vS,
		fragmentShader: fS
	});

var leObj;
loader.load( './LeObject.glb', function (gltf)
{
	leObj = gltf.scene.children[2];
	leObj.material = material;
	leObj.material.lights = true;
	leObj.material.needsUpdate = true;
	leObj.material.aoMapIntensity = 0;
	leObj.material.needsUpdate = true;
	leObj.castShadow = true;
	leObj.receiveShadow = true;
	leObj.position.x = 1;
	leObj.position.z = -1;
	scene.add(gltf.scene);
});
2

I don’t see you assigning the texture to the uniform anywhere. I suggest you study examples to learn basics of writing a custom shader.

Also, GLB is not a format, it’s a file extension.

Meet us half way. Go through the examples. Read the documentation.

3

Okay wait… do i have to manually read the textures from the GLB and then assign them back to the uniforms of the new shader?

4

Something like that. You can pull them from the original material. Shaders are tough. There are many wonderful tools that make working with shaders easier, alas, they are not available in three.js.

5

For the past two days i was looking into three.js and the examples are mostly way to simplistic. Rarelly any example uses glb/gltf files with predefined textures. Mostly is a random shape with an extra texture not very helpful for my questions.
I have Tools to write shaders so thats not an issue.
The main Problem is that there seems to be no best practice example on how to load a glb and replace the shader so that everything works. I just want to replace the standard-shader with a standard-shader v2 and not Change the source-coder of three (which i had to as adhoc solution atm.)

btw. What do you see here? Is it just black too for you?
https://codepen.io/anon/pen/LqrbEP
This is the answer of one of the Moderators here. It does not work and i wonder why. This is close to what i want (still just a square with some random texture) but it Looks like a standard-shader replacement.