Can't I use GLSL ES on iOS to handle textures?

[Taniharu]

Hello.
I’m currently trying postprocessing with GLSL on iOS.
But texture2D() doesn’t work well. The shader’s worked WebGL.
Does anyone know how to handling texture width GLSL on iOS ?
Sorry my poor English.

// shader.vert

precision highp float;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;

attribute vec3 position;
attribute vec4 color;
attribute vec3 normal;
attribute vec2 texcoord;

varying vec3 vNormal;
varying vec4 vColor;
varying vec2 vTexCoord;


void main(){
    vec4 positionVec4 = vec4(position, 1.0);
    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
    vNormal     = normal;
    vColor      = color;
    vTexCoord = texcoord;
    gl_Position =  positionVec4;
}

// shader.vert

precision highp float;

uniform sampler2D tex;
uniform vec2 resolution;
uniform float time;
varying vec3 vNormal;
varying vec4 vColor;
varying vec2 vTexCoord;

void main()
{   
    vec4 smpColor = texture2D(tex, vTexCoord);
    gl_FragColor = smpColor;
}```

[pierre_tardif00]

Hi @Taniharu,

attribute vec2 texcoord;

Are you sure those are passed in your texture?
In this case, it should work, I can confirm I’m processing my texture on iOS the exact same way.
The only difference is the texture coordinates I’m creating :
vTexCoord = position.xy * .5 + .5;

Try if you get anything using that maybe?

Best,

P

[Taniharu]

Thanks to you, I solved the problem. When I modified the texture coordinates, It works fine.
Thank you very much !! You’ve been very helpful !!

[Taniharu]

Sorry, I found a new problem.
The fbo image is displayed since I modified the texture coordinates like this. However, the aspect ratio of the FBO image is not right and it is displayed smaller than the specified size. I’m using iphone xr and ofx0.11.0.
Please let me know if you know anything🙇‍♂️

//shader.frag
precision highp float;

uniform sampler2D texture;
uniform vec2 resolution;
uniform float time;
varying vec3 vNormal;
varying vec4 vColor;
varying vec2 vTexCoord;

void main()
{   
    vec4 smpColor = texture2D(texture, gl_FragCoord.xy/resolution);
    gl_FragColor = smpColor;
}

//shader.vert
precision highp float;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;

attribute vec3 position;
attribute vec4 color;
attribute vec3 normal;
attribute vec2 texcoord;

varying vec3 vNormal;
varying vec4 vColor;
varying vec2 vTexCoord;


void main(){
    vec4 positionVec4 = vec4(position, 1.0);
    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
    vNormal     = normal;
    vColor      = color;
    vTexCoord = position.xy * .5 + .5;
    gl_Position =  positionVec4;
}

//ofApp.cpp
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
    ofSetBackgroundColor(0, 0, 0);
    shader.load("shaders/shader.vert", "shaders/shader.frag");
    fbo.allocate(ofGetWidth(),ofGetHeight());
    shader.bindDefaults();
}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){
    fbo.begin();
    ofClear(0, 0, 0);
    ofSetColor(255, 0, 0);
    ofDrawRectangle(0, 0, ofGetWidth(), ofGetHeight());
    ofSetColor(0, 0, 255);
    ofDrawCircle(mouseX, mouseY, 100);
    fbo.end();
    
    shader.begin();
    shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
    shader.setUniformTexture("texture", fbo, 0);
    shader.setUniform1f("time", ofGetElapsedTimef());
    ofDrawRectangle(0, 0, ofGetWidth(), ofGetHeight());
    shader.end();
}

[pierre_tardif00]

vec4 smpColor = texture2D(texture, gl_FragCoord.xy/resolution);

Not sure this makes sense :
you should use non remapped Coordinates for your fbo. ( position as a varying vec2).

++

[Taniharu]

Thank you again this time. I made a stupid mistake. I made a few corrections based on your advice.

part 1

I modified line of “texture2D” like as follows. But the fbo image doesn’t display properly.

• The fbo image is stretched vertically.
• It is expanded.
• It is placed at the bottom right.

vec4 smpColor = texture2D(texture, vTexCoord);

↑figure1: displayed with shader

↑figure2: displayed with fbo.draw()

part 2

Next I changed this line

//before
vTexCoord = position.xy * .5 + .5;

to

//after
vTexCoord = position.xy;

The entire image appears to be displayed. But the image is stretched vertically yet and it’s size is little small.

↑figure3: displayed with shader2

If I need more knowledge to solve this problem. I’ll try to solving after studying.