Mobile device experiences shader malfunction

On my laptop, this shader works perfectly fine. However, I'm facing issues on mobile devices and suspect that it might be related to precision settings. Here is the error message I'm encountering:

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;

Here's the link to the shader code in the JavaScript tab: https://codepen.io/uiunicorn/pen/QWQrQBB

Full Shader Code:

export const terrain_shader = (function() {
  
    // Vertex Shader
    const _VS = `
    
    // Shader logic here...
    
    `;
  
    // Fragment Shader
    const _PS = `
    
    // Shader logic here...
    
    `;
  
    // Additional Vertex Shader Components
    const _VS_1 = `
    
    // More vertex shader logic...
    
    `;
  
    const _VS_2 = `
    
    // More vertex shader logic...
    
    `;
  
    // Additional Fragment Shader Components
    const _PS_1 = `
    
    // More fragment shader logic...
    
    `;
  
    const _PS_2 = `

    // More fragment shader logic...

    `;
  
    return {
      VS: _VS,
      PS: _PS,
      VS1: _VS_1,
      VS2: _VS_2,
      PS1: _PS_1,
      PS2: _PS_2,
    };
  })();
  

Any assistance would be greatly appreciated.

Thank you!

Answer №1

Encountered the identical issue as you did on specific Android devices running Android 12. The root cause lies in how your arrays weightIndices and weightValues are initialized.

To rectify:

float weightIndices[4] = float[4](vWeights1.x, vWeights1.y, vWeights1.z, vWeights1.w);

Substitute it with (same applies to weightValues):

float weightIndices[4];
weightIndices[0] = vWeights1.x;
weightIndices[1] = vWeights1.y;
weightIndices[2] = vWeights1.z;
weightIndices[3] = vWeights1.w;

Answer №2

The error message is indicating that there is no default precision defined in your shader code because you have not specified a precision at the start.

To resolve this issue, ensure that each completed shader contains the line precision highp float; at the beginning when it is linked to a material. Since your shaders are split across multiple files, it may be challenging to identify the exact location for this line, but make sure it is positioned at the start of each file.

Answer №3

When working with OpenGL, it's important to note that the specification does not provide a precision qualifier for fragment shaders. This means that you will need to define it yourself.

To ensure proper precision, make sure to include these two lines in your shader code right below the const _PS_1 declaration:

precision highp float; // Define float precision
precision highp int;   // Define int precision

Your updated shader code should look something like this:

const _PS_1 = `
precision mediump sampler2DArray;

precision highp float; // Define float precision
precision highp int;   // Define int precision

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

in vec3 vCoords;
in vec4 vWeights1;
in vec4 vWeights2;

To achieve optimal performance, it's recommended to use the lowest precision possible. This is especially crucial on hardware with lower capabilities. Here are some guidelines to follow:

  • For world space positions and texture coordinates, opt for **highp float** precision.
  • For other data types (vectors, HDR colors, etc.), start with **mediump float** precision and adjust as needed.

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

Retrieve the value of the second child element in a table cell when clicking on it with Javascript

I have created a table with one row that includes the title of the month and a cell containing an inner table with multiple rows and cells. I want to display the content of the second cell in the second table as a modal box or alert dialog when it is click ...

Determine which file to load based on the size of the browser

I have a quick question regarding the correct syntax. I am trying to only load the jQuery file if the browser screen width is less than 1100px. <script type="text/javascript"> $(document).ready(function() { if ($(window).width() < 1100) { ...

Participating in a scheduled Discord Voice chat session

Currently, I am in the process of developing a bot that is designed to automatically join a voice chat at midnight and play a specific song. I have experimented with the following code snippet: // To make use of the discord.js module const Discord = requ ...

Here is a method to display a specific string in the mat-datepicker input, while only sending the date in the backend

enter image description hereIn this code snippet, there is a date input field along with a Permanent button. The scenario is that when the Permanent button is clicked, it should display "Permanent" in the input UI (nativeElements value), but the value bein ...

What methods can I use to prevent repeated login requests to SalesForce databases when using Express.js routers?

Is there a way to avoid logging into SalesForce databases and passing queries on multiple routers in express.js? It's tedious to login every time. If you have any suggestions, please let me know. var conn = new jsforce.Connection({ oauth2 : salesfo ...

How to extract a value from a span input textbox using Vue?

I just started using Vue and I'm attempting to create an auto-growing input. I've realized that it's not possible to create a real <input> element that adjusts its size based on its content and allows for value modifications using v-mo ...

Using a Vue.js component in a Laravel Blade template can be achieved by first registering the component

I added a component registration in my app.js as shown below: Vue.component('navbar', require('./components/Navbar.vue')); Now I am looking to import that component into my blade.php file like so: <template> <nav class="navb ...

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

Fixed Element Transitioning from Starting Position on Scroll

Check out the JSFiddle example here I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly ...

Executing NestJS code after applying a pipe but before reaching the method handler

Is it possible to insert additional code after all the pipes have transformed but before the method handler is called? https://i.sstatic.net/IjQvv.png ...

Having trouble implementing render props for a toggle button that reveals/hides child components

My goal is to display or hide a couple of child components based on a toggle click using the original HTML structure provided. However, I am encountering an issue where the EditToggle link needs to be displayed next to the h2 element inside the "subtitle-c ...

Disabling hover effects in Chart.js: A step-by-step guide

Is there a way to disable hover effects, hover options, and hover links on a chart using chart.js? Here is the code I have for setting up a pie chart: HTML.. <div id="canvas-holder" style="width:90%;"> <canvas id="chart-area" /> </div ...

Displaying a div after a successful form submission using Jquery

I created two popup windows. One is used to ask the user whether they want to submit the form, and if they click 'yes', the form is submitted. The issue I encountered is that the other popup window should be shown after the form is successfully s ...

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

Looping through a JSON array and encoding it using the `

I am looking to retrieve data from the database using AJAX and populate a 'select' tag with that data. Each name should be displayed in its own 'option'. Here is the code snippet: Index.php: <label>Select:</label> <sel ...

Struggling with integrating Appbar and Drawer components in Material UI with ReactJS

I am attempting to create my first app using ReactJS and Material UI, but I am facing some challenges. My main goal is to display a left drawer when the button on the bar is clicked. Here is the code I currently have in my App.jsx file: import React from ...

I attempted to set up a Discord bot using JavaScript on Replit, but unfortunately, it seems to only respond when I mention the bot specifically, rather than to any regular

I've successfully created a python discord bot, but I'm encountering issues with the javascript one. Despite trying various solutions from StackOverflow, I'm unable to understand how to get it working. The plethora of online solutions for d ...

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

The recently introduced button following an ajax request fails to trigger the expected event

How can I ensure jQuery still works after adding a new button with AJAX? $('button.btn').on('click', function(form) Here is a sample existing button on initial page load: <button id="5" class="yellow-button btn">Publish</but ...