Code Monkey home page Code Monkey logo

Comments (7)

tfriedel6 avatar tfriedel6 commented on August 23, 2024

Damn, I knew this kind of thing would happen at some point. There seem to be frustrating subtle incompatibilities between OpenGL versions, and especially between OpenGL and OpenGL ES. This makes writing a library that uses OpenGL quite hard, since the library can't control the version of OpenGL that is used.

Additionally, every implementation of OpenGL differs slightly, so one can never be quite sure if an application will run the same everywhere.

What you could try as a temporary fix is to copy the goglbackend package to your project and use that instead, and in the shaders.go file change the shader sources to the following:

var unifiedVS = `
#version 150

in vec2 vertex, texCoord;

uniform vec2 canvasSize;
uniform mat3 matrix;

out vec2 v_cp, v_tc;

void main() {
	v_tc = texCoord;
	vec3 v = matrix * vec3(vertex.xy, 1.0);
	vec2 tf = v.xy / v.z;
	v_cp = tf;
	vec2 glp = tf * 2.0 / canvasSize - 1.0;
    gl_Position = vec4(glp.x, -glp.y, 0.0, 1.0);
}
`
var unifiedFS = `
#version 150

#ifdef GL_ES
precision mediump float;
#endif

in vec2 v_cp, v_tc;

uniform int func;

uniform vec4 color;
uniform float globalAlpha;

uniform sampler2D gradient;
uniform vec2 from, dir, to;
uniform float len, radFrom, radTo;

uniform vec2 imageSize;
uniform sampler2D image;
uniform mat3 imageTransform;
uniform vec2 repeat;

uniform bool useAlphaTex;
uniform sampler2D alphaTex;

uniform int boxSize;
uniform bool boxVertical;
uniform float boxScale;
uniform float boxOffset;

bool isNaN(float v) {
  return v < 0.0 || 0.0 < v || v == 0.0 ? false : true;
}

void main() {
	vec4 col = color;

	if (func == 5) {
		vec4 sum = vec4(0.0);
		if (boxVertical) {
			vec2 start = v_tc - vec2(0.0, (float(boxSize) * 0.5 + boxOffset) * boxScale);
			for (int i=0; i <= boxSize; i++) {
				sum += texture2D(image, start + vec2(0.0, float(i) * boxScale));
			}
		} else {
			vec2 start = v_tc - vec2((float(boxSize) * 0.5 + boxOffset) * boxScale, 0.0);
			for (int i=0; i <= boxSize; i++) {
				sum += texture2D(image, start + vec2(float(i) * boxScale, 0.0));
			}
		}
		gl_FragColor = sum / float(boxSize+1);
		return;
	}

	if (func == 1) {
		vec2 v = v_cp - from;
		float r = dot(v, dir) / len;
		r = clamp(r, 0.0, 1.0);
		col = texture2D(gradient, vec2(r, 0.0));
	} else if (func == 2) {
		float o_a = 0.5 * sqrt(
			pow(-2.0*from.x*from.x+2.0*from.x*to.x+2.0*from.x*v_cp.x-2.0*to.x*v_cp.x-2.0*from.y*from.y+2.0*from.y*to.y+2.0*from.y*v_cp.y-2.0*to.y*v_cp.y+2.0*radFrom*radFrom-2.0*radFrom*radTo, 2.0)
			-4.0*(from.x*from.x-2.0*from.x*v_cp.x+v_cp.x*v_cp.x+from.y*from.y-2.0*from.y*v_cp.y+v_cp.y*v_cp.y-radFrom*radFrom)
			*(from.x*from.x-2.0*from.x*to.x+to.x*to.x+from.y*from.y-2.0*from.y*to.y+to.y*to.y-radFrom*radFrom+2.0*radFrom*radTo-radTo*radTo)
		);
		float o_b = (from.x*from.x-from.x*to.x-from.x*v_cp.x+to.x*v_cp.x+from.y*from.y-from.y*to.y-from.y*v_cp.y+to.y*v_cp.y-radFrom*radFrom+radFrom*radTo);
		float o_c = (from.x*from.x-2.0*from.x*to.x+to.x*to.x+from.y*from.y-2.0*from.y*to.y+to.y*to.y-radFrom*radFrom+2.0*radFrom*radTo-radTo*radTo);
		float o1 = (-o_a + o_b) / o_c;
		float o2 = (o_a + o_b) / o_c;
		if (isNaN(o1) && isNaN(o2)) {
			gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
			return;
		}
		float o = max(o1, o2);
		o = clamp(o, 0.0, 1.0);
		col = texture2D(gradient, vec2(o, 0.0));
	} else if (func == 3) {
		vec3 tfpt = vec3(v_cp, 1.0) * imageTransform;
		vec2 imgpt = tfpt.xy / imageSize;
		col = texture2D(image, mod(imgpt, 1.0));
		if (imgpt.x < 0.0 || imgpt.x > 1.0) {
			col *= repeat.x;
		}
		if (imgpt.y < 0.0 || imgpt.y > 1.0) {
			col *= repeat.y;
		}
	} else if (func == 4) {
		col = texture2D(image, v_tc);
	}

	if (useAlphaTex) {
		col.a *= texture2D(alphaTex, v_tc).a * globalAlpha;
	} else {
		col.a *= globalAlpha;
	}

    gl_FragColor = col;
}
`

Hope that helps. For a better solution later on I think I will make the GL version configurable somehow.

from canvas.

richardwilkes avatar richardwilkes commented on August 23, 2024

That does get further. With your changes above, I now get:

failed to compile fragment shader:

                                  ERROR: 0:44: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:49: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:52: Use of undeclared identifier 'gl_FragColor'
                                  ERROR: 0:60: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:72: Use of undeclared identifier 'gl_FragColor'
                                  ERROR: 0:77: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:81: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:89: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:93: Invalid call of undeclared identifier 'texture2D'
                                  ERROR: 0:98: Use of undeclared identifier 'gl_FragColor'

I'd debug this myself and try to contribute a solution, but I know virtually nothing about OpenGL (hence my hope to use your library). Thanks for any further help you can provide.

from canvas.

tfriedel6 avatar tfriedel6 commented on August 23, 2024

That is progress. Try the following shaders:

var unifiedVS = `
#version 150

in vec2 vertex, texCoord;

uniform vec2 canvasSize;
uniform mat3 matrix;

out vec2 v_cp, v_tc;

void main() {
	v_tc = texCoord;
	vec3 v = matrix * vec3(vertex.xy, 1.0);
	vec2 tf = v.xy / v.z;
	v_cp = tf;
	vec2 glp = tf * 2.0 / canvasSize - 1.0;
    gl_Position = vec4(glp.x, -glp.y, 0.0, 1.0);
}
`
var unifiedFS = `
#version 150

#ifdef GL_ES
precision mediump float;
#endif

in vec2 v_cp, v_tc;

uniform int func;

uniform vec4 color;
uniform float globalAlpha;

uniform sampler2D gradient;
uniform vec2 from, dir, to;
uniform float len, radFrom, radTo;

uniform vec2 imageSize;
uniform sampler2D image;
uniform mat3 imageTransform;
uniform vec2 repeat;

uniform bool useAlphaTex;
uniform sampler2D alphaTex;

uniform int boxSize;
uniform bool boxVertical;
uniform float boxScale;
uniform float boxOffset;

out vec4 outColor;

bool isNaN(float v) {
  return v < 0.0 || 0.0 < v || v == 0.0 ? false : true;
}

void main() {
	vec4 col = color;

	if (func == 5) {
		vec4 sum = vec4(0.0);
		if (boxVertical) {
			vec2 start = v_tc - vec2(0.0, (float(boxSize) * 0.5 + boxOffset) * boxScale);
			for (int i=0; i <= boxSize; i++) {
				sum += texture(image, start + vec2(0.0, float(i) * boxScale));
			}
		} else {
			vec2 start = v_tc - vec2((float(boxSize) * 0.5 + boxOffset) * boxScale, 0.0);
			for (int i=0; i <= boxSize; i++) {
				sum += texture(image, start + vec2(float(i) * boxScale, 0.0));
			}
		}
		outColor = sum / float(boxSize+1);
		return;
	}

	if (func == 1) {
		vec2 v = v_cp - from;
		float r = dot(v, dir) / len;
		r = clamp(r, 0.0, 1.0);
		col = texture(gradient, vec2(r, 0.0));
	} else if (func == 2) {
		float o_a = 0.5 * sqrt(
			pow(-2.0*from.x*from.x+2.0*from.x*to.x+2.0*from.x*v_cp.x-2.0*to.x*v_cp.x-2.0*from.y*from.y+2.0*from.y*to.y+2.0*from.y*v_cp.y-2.0*to.y*v_cp.y+2.0*radFrom*radFrom-2.0*radFrom*radTo, 2.0)
			-4.0*(from.x*from.x-2.0*from.x*v_cp.x+v_cp.x*v_cp.x+from.y*from.y-2.0*from.y*v_cp.y+v_cp.y*v_cp.y-radFrom*radFrom)
			*(from.x*from.x-2.0*from.x*to.x+to.x*to.x+from.y*from.y-2.0*from.y*to.y+to.y*to.y-radFrom*radFrom+2.0*radFrom*radTo-radTo*radTo)
		);
		float o_b = (from.x*from.x-from.x*to.x-from.x*v_cp.x+to.x*v_cp.x+from.y*from.y-from.y*to.y-from.y*v_cp.y+to.y*v_cp.y-radFrom*radFrom+radFrom*radTo);
		float o_c = (from.x*from.x-2.0*from.x*to.x+to.x*to.x+from.y*from.y-2.0*from.y*to.y+to.y*to.y-radFrom*radFrom+2.0*radFrom*radTo-radTo*radTo);
		float o1 = (-o_a + o_b) / o_c;
		float o2 = (o_a + o_b) / o_c;
		if (isNaN(o1) && isNaN(o2)) {
			outColor = vec4(0.0, 0.0, 0.0, 0.0);
			return;
		}
		float o = max(o1, o2);
		o = clamp(o, 0.0, 1.0);
		col = texture(gradient, vec2(o, 0.0));
	} else if (func == 3) {
		vec3 tfpt = vec3(v_cp, 1.0) * imageTransform;
		vec2 imgpt = tfpt.xy / imageSize;
		col = texture(image, mod(imgpt, 1.0));
		if (imgpt.x < 0.0 || imgpt.x > 1.0) {
			col *= repeat.x;
		}
		if (imgpt.y < 0.0 || imgpt.y > 1.0) {
			col *= repeat.y;
		}
	} else if (func == 4) {
		col = texture(image, v_tc);
	}

	if (useAlphaTex) {
		col.a *= texture(alphaTex, v_tc).a * globalAlpha;
	} else {
		col.a *= globalAlpha;
	}

    outColor = col;
}
`

from canvas.

richardwilkes avatar richardwilkes commented on August 23, 2024

Yay! That gets me past the shader compilation. Thank you!

Still nothing showing up in the window, but I'm sure I just need to poke that my code a bit to wire things up properly.

from canvas.

richardwilkes avatar richardwilkes commented on August 23, 2024

Adding a call to gl.Flush() after I'm done drawing was all that I was missing. Again, thank you for the help. Would you like me to create a PR with the above change in it for you?

from canvas.

tfriedel6 avatar tfriedel6 commented on August 23, 2024

Interesting. I've never seen that a glFlush call is actually necessary, but I guess it can be.

Sure, a PR would be nice!

from canvas.

lukino563 avatar lukino563 commented on August 23, 2024

any update on this problem? I have this problem too, Im using it for image generate on workers
i do offscreen rendering on linux machine

from canvas.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.