Comments (7)
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.
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.
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.
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.
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.
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.
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)
- Hello, world demo inconsistent HOT 2
- [suggestion] gomobile display RegisterFilter HOT 1
- Is there any plan to support Ellipse for Path2D? HOT 1
- Flickering when using glfwcanvas HOT 3
- Memory Leak in DrawImage() HOT 1
- How to convert canvas to png? HOT 2
- Slow text rendering? HOT 3
- MacOs canvas ratio problem HOT 2
- Blank red screen macOS HOT 1
- Pixelated text HOT 4
- Improper canvas size when using scaled resolutions on macOS HOT 1
- What's the proper way to use RGBA for something like SetFillStyle? HOT 2
- how I should compile on windows? HOT 2
- How to save canvas as png with transparent background HOT 1
- Call CreateWindow function failed on WSL2 HOT 3
- Is there a plan for when the missing features will be supported?
- support font.Face drawing // font fallbacks
- Combined keyboard touch don't trigger wnd.Event
- More Examples?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from canvas.