Terrain texture will not show up

Questions
1

In chrome the floor texture you can see here works fine:
http://wonder-3d.hol.es/ADz(1)z/115(1)

However! on firefox you can’t see the texture also the same on mobile
with mobile i get this:

`

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders THREE.WebGLShader: gl.getShaderInfoLog() fragment 0:434: S0032: no default precision defined for variable 'float[4]'1: version 300 es 2: #define varying in 3: out highp vec4 pc_fragColor;

`

i’ve tried this:

precision mediump sampler2DArray;

precision mediump float; 
precision mediump int;   

uniform sampler2DArray TRIPLANAR_normalMap;
uniform sampler2DArray TRIPLANAR_diffuseMap;
uniform sampler2D TRIPLANAR_noiseMap;

to:

const _PS_1 and _PS

still the error persists doing this also throw a new error:

Uniforms with the same name but different type/precision

i was able to make this error go away by adding:

precision mediump float;

to the vertex shaders but i’m still left with the original error of:

no default precision defined for variable 'float[4]'1

I’ve been struggling with this for a few weeks now with no real answers does anyone know whats going on?

here is the relevant shader file:
http://wonder-3d.hol.es/ADz(1)z/src/terrain-shader.js

thanks!

2

renderer.precision="mediump";
or
renderer.precision="lowp";

3

@looeee @marquizzo @Mugen87 @donmccurdy @drcmda maybe one you guys know as you are gods in my eyes and have always helped me in the past with a correct answer :innocent: sorry for the tags! just really struggling and my shader knowledge is really showing/ or i should say lacking :joy: :pensive:

4

I tried this before if i remember and it didn’t work but ill try again just incase as im really lost, thanks for your reply!

5

sadly neither solve it and the same issue :frowning:

6

anyone at all still no luck?
also a bounty on this over at stackoverflow:

7

Might not solve your problem but for the precision to take effect in your shader code, you need to provide it directly to the constructor:

const renderer = new THREE.WebGLRenderer({
  antialias: false,
  alpha: true,
  canvas,
  precision: 'mediump',
});

This will not work:
renderer.precision = 'mediump';

Otherwise, you can write RawShader and check directly if your device supports high precision like so:

#ifdef GL_FRAGMENT_PRECISION_HIGH
        precision highp float;
    #else
        precision mediump float;
    #endif
8

thanks for the heads up i tried just incase even with lowp but sadly didnt work

9

I’ve been trying to give you a solution on StackOverflow, but you’re not providing us with the tools to help you. I asked you to provide a working demo of your shaders on JSFiddle so I could test on mobile. Instead, you provided us with this, which is not a working demo. It’s just the standalone shader code with no way for anyone to execute.

You’ve also given us a link to the full build of your game, which is again not helpful because we cannot make modifications to your code to try fixes, plus we don’t have the time to dig through your entire codebase. It’s up to you to make it as simple as possible so it’s easy for others to help you without taking hours of their day. This is why creating a minimal reproducible example is important:

See this question as an example. The user asked a question with a simple reproduction on Codepen, so I was able to verify the problem and provide a solution that same day.

2 Likes
10

See my answer on Stackoverflow, it should normally fix your problem (faced the same bug and came across your thread before that).