课程名称:2022年最新WebGL Shader教程(完结)
B站地址:https://www.bilibili.com/video/BV1iR4y1C7LQ/?p=4
课程章节:第四节 颜色的计算
代码地址:https://gitee.com/jsonco/web-gl-shader/blob/master/4.WebGL%20shader%E9%A2%9C%E8%89%B2%E8%AE%A1%E7%AE%97/code/%E9%A2%9C%E8%89%B2%E8%AE%A1%E7%AE%97.html
live预览代码为:
代码编译器-跳转展示
win下展示的效果和课程视频一致
但是MacOS下的效果如下:
感觉问题出在计算distance 或者 坐标的地方,片元着色去如下的话,出来的win是圆,mac是矩形
vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);
vec3 color=vec3(0.);
if(distance(vec2(0.,0.2),vec2(p.xy))<=.4)
{
color=vec3(.0,.0,1.);
}
gl_FragColor=vec4(color,1.);
还请大佬指点一二,谢谢
昨天和冰哥简单聊到了这个,问题解决的过程:
1、mac电脑上,chrome和Firefox浏览器都存在这个问题,而自带的safari浏览器不存在这个问题
2、其实显示的 是截取的中间一部分:
3、判断是,不同环境的不同浏览器 对应的 gl_PointSize 最大值不一样导致的
4、于是把片源着色器进行了如下缩放,显示正常了
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main(){
vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y)*0.5;
vec3 color1=vec3(0.);
vec3 color2=vec3(0.);
vec3 color3=vec3(0.);
if(distance(vec2(0.,0.02),vec2(p.xy))<=.04)
{
color1=vec3(.0,.0,1.);
}
if(distance(vec2(-.02,-.02),vec2(p.xy))<=.04)
{
color2=vec3(1.,.0,0.);
}
if(distance(vec2(.02,-.02),vec2(p.xy))<=.04)
{
color3=vec3(.0,1.,0.);
}
vec3 color=vec3(0.,0.,0.)+color1 + color2 + color3;
gl_FragColor=vec4(color,1.);
}
另外一个思路是,webgl不用画点 gl.drawArrays(gl.POINTS, 0, 1) 的方式做底板,而是画两个三角形,这样就突破了最大gl_PointSize的限制了