WebGL_Shader教程中,第四节绘制圆颜色,win和mac下的区别?

发布于 2023-06-01 12:00:42

课程名称: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下展示的效果和课程视频一致
image.png

但是MacOS下的效果如下:
image.png

感觉问题出在计算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.);

还请大佬指点一二,谢谢

查看更多

关注者
0
被浏览
784
地虎降天龙
地虎降天龙 图形社区官方人员 2023-06-05
也许宇宙中最反直觉的真理是,你给别人的越多,你得到的也越多。

昨天和冰哥简单聊到了这个,问题解决的过程:
1、mac电脑上,chrome和Firefox浏览器都存在这个问题,而自带的safari浏览器不存在这个问题
2、其实显示的 是截取的中间一部分:
image.png
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.);
        }
1 个回答

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览