Troubleshooting Texture Compatibility Issue with ThreeJS ShaderMaterial on iOS Devices

Seeking assistance with shaders in Threejs. I have a plane that requires a mixture of 10 different textures; currently using ShaderMaterial and passing all textures for blending. Below is my Fragment Shader code:

vec3 CFull = texture2D(tFull, vUv).rgb;
vec3 CIndustria = texture2D(tIndustria, vUv ).rgb;
vec3 CCave = texture2D(tCave, vUv).rgb;
vec3 CRifiuti = texture2D(tRifiuti, vUv).rgb;
vec3 CEdile = texture2D(tEdile, vUv).rgb;
vec3 CEventi = texture2D(tEventi, vUv).rgb;
vec3 CMarine = texture2D(tMarine, vUv).rgb;
vec3 COil = texture2D(tOil, vUv).rgb;
vec3 CStrade = texture2D(tStrade, vUv).rgb;
vec3 CVerde = texture2D(tVerde, vUv).rgb; 

c = CFull * CIndustria * CCave * CRifiuti * CEdile * CEventi * CMarine * COil * CStrade * CVerde;
gl_FragColor = vec4(c, 1.0); 

The code functions properly on Android or desktop platforms, but encounters issues on iOS. When using only 4/5 textures, it works fine on iOS...

Possibly the issue lies in the complexity of the shader? Any suggestions for optimizing the code? (or alternative solutions)

Answer №1

The specifications for WebGL state that a browser must support a minimum of 8 combined texture units. It is likely that your iOS device meets this requirement, but you are requesting 10 texture units.

To check the maximum supported texture units on your iOS device, you can visit webglreport.com and look for the "Textures > Max Combined Texture Image Units" section. Each device may have a different limit - for example, my desktop supports up to 32 while my iPhone has a lower limit.

If you only need to multiply textures together, you could use a 2D <canvas> context to blend them and then convert the layered canvas into a single texture using THREE.CanvasTexture for use in Three.js.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Parsing the JSON string from PHP using JSON.parse resulted in an unexpected and strange array

I've encountered a challenge when trying to transfer a JSON object from the server to client-side JavaScript. I fetched rows of data from a MySQL query and stored them in $result. Below is the code snippet: var json = '<?= json_encode($resu ...

Combining numerous inputs into an array in a React component

As a beginner in coding, I am eager to learn React by building a project. Currently, I am facing a challenge and seeking guidance. https://i.sstatic.net/Ic2zC.png My goal is to store all these values in an array structured as follows: { option: { s ...

Issue with WebRTC, socket.io, and node.js: Unable to access the property 'emit' as it is undefined

Currently, I am in the process of creating a webrtc video app. Within the client code section, the following lines are present: getUserMedia(constraints, handlemedia, errorhandle); constraints = {video: true}; function handlemedia(stream){ //other act ...

It ceases to function when transferred to another file

I have a function written in coffeescript that goes like this: _skip_version = (currentVersion, skippedVersions) -> if (currentVersion.indexOf(skippedVersions) == -1) return false return true This function is currently located in my archive.sp ...

Mongoose: execute population step after making the query

What is the proper way to populate the query result in Mongoose after executing a query similar to this: users .find({name:"doejohn"}) .skip(3) .limit(9) .exec((err,user) => { user // result ...

Error: Unable to access the 'name' property of an undefined variable

When running the code, I encountered a "TypeError: Cannot read property 'name' of undefined" error, even though when I console.log it, it provides me with the object import React from "react"; class Random extends React.Component { constructo ...

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...

models are being loaded in threejs

Encountering a challenge while loading objects into the three.js viewport. Tutorials suggest using THREE.ObjectLoader(). However, it seems that ObjectLoader was removed in recent versions. What is the correct method for loading models or which loader (and ...

Is it possible to display large images in an iOS app without using CATiledLayer?

I am facing a challenge with an image that measures about 7000x6000px. I want to display this image in a scrollview/imageView within my app, but the size is too large for effective display. The image is essentially a map and I am looking to optimize the ap ...

Getting data from JSON to fill an array: A step-by-step guide

I am currently facing an issue where I am trying to incorporate data from a JSON file into my array, but for some reason, the information is returning as 'undefined' because nothing is being created in my array. Below are the contents of the JSON ...

In the event that the $state cannot be located, redirect to a different URL using Ui

Our platform is a unique combination of WordPress backend and AngularJS frontend, utilizing ui.router with html5 mode turned on and a base href="/" due to the stack sites being in the root of the site. We are currently facing an issue: 1) Previously, whe ...

Adjusting the visible options in ngOptions causes a disruption in the selected value of the dropdown menu

I have successfully implemented a feature that allows users to convert temperature values displayed in a drop-down menu to either Celsius or Fahrenheit. For this functionality, I am using a select input with ng-options as shown below: <select ng-model ...

Tips for closing 2 models in a React application

Currently, I am working on a project using ReactJs. One of the functionalities I am implementing is generating a user's gallery when the user clicks on their avatar. To achieve this, I am utilizing the react-grid-gallery package along with semantic ui ...

When an image is clicked, I am attempting to access data from a Sharepoint list

In my Sharepoint list, there are three columns: Image, Title, and Description. I am using ajax to retrieve the items from the list. The images can be successfully retrieved, but my goal is to display the title and description of the clicked image when an ...

I am a newcomer to Stack Overflow and I am facing difficulty in getting my form to submit successfully

Excuse any errors as I am new to this. I am facing an issue where my form is not submitting anything in the console. Could it be because my entire HTML file is within a return statement from a JavaScript function? I assumed it would work since I imported a ...

Engaging User Forms for Enhanced Interactivity

I'm in the process of developing an application that involves filling out multiple forms in a sequential chain. Do you have any suggestions for creating a more efficient wizard or form system, aside from using bootstrap modals like I currently am? C ...

Unable to retrieve information from the database during the http.get request

Hey everyone, I've encountered an issue that I need help with. I'm working on retrieving data from a database using an HTTP call and then returning it to the front end. Here's what I have so far: app.get('/contentHandler/post/frontPage ...

Using SVG Mask to enhance shape Fill

I am having trouble achieving the desired effect of darkening the fill of objects based on a specified gradient. Instead, when the mask is applied over the fill, it actually lightens it. I suspect that this issue arises from the color blending method being ...

After an AJAX request is completed, the event.keyCode is not returning the key codes for the up and

I have a function that uses AJAX to autocomplete a text field. The results are added to a specific div element. I am trying to implement the functionality where users can navigate through the results using the up and down arrow keys. However, I am encoun ...

Discovering a website's console content using the "web-request" npm package

I recently added the web-request NPM package to my project with the goal of retrieving console messages from a specific website. However, I encountered an issue as I was unsure of how to achieve this. var result = await WebRequest.get('http://disco ...