Fragment wirefame shader not rendering on safari [Solved!]

Questions
,
1

This fiddle runs perfectly on desktop, but the island geometry and its wireframe material does not show up on safari ios. JSFiddle

What can be the reason for that?

I’m not very used to three.js and got a user from this board to help me set up the fiddle as an example. (Thanks!! @Prisoner849)

//Edit, confirmed that it does render on a galaxy/android, but not on Safari, not even desktop.

2

A short clarification for those, who would like to help: the idea is to use a single height map for all the objects in the scene (you can see it, when change the heightFactor value in GUI, that instanced fir-trees and boxes move in accordance to the height of the “ground”).

PS I’ve got no idea of what’s going on iOS safari, as I don’t have Apple devices.
PPS The grid of island’s geometry was made specifically for that scene (see islandGeom() function) :slight_smile:

3

A few updates after some more experimenting:

  • The problem is Safari related, not mobile. As it happens on desktop as well with Safari.
  • It seems the vertex shader might not be the problem, but rather the fragment shader.

Have updated the title to reflect these findings.

4

Since there is a call to fwidth, you need to enable OES_standard_derivatives extension.
Add this after adding the plane.

renderer.context.getExtension('OES_standard_derivatives');
plane.material.extensions = {
   derivatives: true
};

Updated jsfiddle: https://jsfiddle.net/ceyq9t4b/

3 Likes
5

Wow. I would not have found that out on my own. Thank you so much! Both of you!