webgl blendequation use error

[NichijouCC]

(1st way) gl_FragData[0]=vec4(tempcolor*tempAlpha,1.0);
(2nd way) gl_FragData[0]=vec4(tempcolor,tempAlpha);

l write a shader, use up shorte words in fragment shader,test the webgl blendequation。
this webgl sets is:
webgl.enable(webgl.BLEND);
webgl.blendEquation(webgl.FUNC_ADD);
webgl.blendFunc(webgl.SRC_ALPHA,webgl.ONE);

l use those shader render one quad，the background is black, texture alphaPremultiply=false.
the rend result is diffrent between two way, but in this enviroment (l set) the render results should be the same, and the 1st way is agree with test result in unity3d。

can you help me abount this ?is there anything wrong l do? Thank you for the first.

----------- here is my fs shader:
uniform sampler2D _MainTex;
uniform mediump vec4 _Main_Color;

varying lowp vec4 v_color;
varying mediump vec2 _maintex_uv;
varying mediump vec2 _mask_uv;

void main()
{
highp vec4 v_color =_Main_Color2.0;
highp vec4 basecolor=texture2D(_MainTex,_maintex_uv);
lowp vec3 tempcolor=v_color.rgbbasecolor.rgb;
lowp float tempAlpha=v_color.a*basecolor.a;

//gl_FragData[0]=vec4(tempcolor*tempAlpha,1.0);
gl_FragData[0]=vec4(tempcolor,tempAlpha);

}

[NichijouCC]

two way test results in unity is the same.

[greggman]

I'm sorry I'm not really understanding your question. Maybe you could modify this small sample to show the issue you're running into?

https://jsfiddle.net/greggman/b4Lfqfer/

[greggman]

and/or include some screenshots. You can just drag and drop images into these messages

[NichijouCC]

https://jsfiddle.net/zL7uq7z8/1/
https://jsfiddle.net/9bwrqu4f/1/
up two links is what i confused，the render result is diffrent.

i find when l add the premutiply alpha in fragmentshader in the 2nd link。the result is right。
https://jsfiddle.net/9bwrqu4f/3/

so when i need use "premutiply alpha" in shader ,maybe you can give me some useful link abount it?

if you have used unity3d ,l also want to ask that "premutiply alpha" is not need for the shader in 2nd link to get same result by my test？

[greggman]

Without deeply diving into what Unity is doing it's hard to know what the issue is

WebGL runs in canvas tag in HTML. The canvas is composited with the page. The default is for the canvas to require premultiplied alpha data inside it.

This article mostly covers that topic

Note that the article mentions {premultipliedAlpha: false}. Recently (or maybe not so recently) that feature broke in Chrome so you might want to choose one of the other solutions.

[NichijouCC]

the article is more abount the canvas with alpha ，{premultipliedAlpha: false}l have already use this , but what l confused is the render result by texture blend with backgroundcolor ( black ,l have clearcolor(0,0,0,1) )in the 2nd test.

(webgl.blendEquation(webgl.FUNC_ADD);webgl.blendFunc(webgl.SRC_ALPHA,webgl.ONE);）accroding to this blend setting :
the resultcolor=srccolorsrcAlpha+destcolorone;
destcolor=(0,0,0,1),so resultcolor=vec4(srccolor.rgbsrcAlpha, srccolor.asrcAlpha+1.0);
then resultcolor=vec4(srccolor.rgb*srcAlpha ,1.0);

in the 2nd linK: -----gl_FragColor=basecolor;
srccolor=basecolor.rgb, srcAlpha=basecolor.a.
after blend compute, gl_FragColor=vec4(basecolor.rgb` *basecolor.a , 1.0);

in the 1st link:-------- gl_FragColor=vec4(basecolor.rgb *basecolor.a,1.0);
srccolor=basecolor.rgb *basecolor.a, srcAlpha=1.0.
after blend compute , gl_FragColor=vec4(basecolor.rgb *basecolor.a,1.0);

accroding to up calculation, 2nd render result should be same with the first one,but the result is not,l don't understand why.

[NichijouCC]

@greggman

[greggman]

The issue is this line

basecolor=basecolor*2.0;

You start of with a baseColor of vec4(1, .3, 0, 1)
followed by this line

basecolor=basecolor*2.0;

baseColor is now vec4(2, .6, 0, 2)

In the only difference between the 2 shaders is

gl_FragColor=vec4(basecolor.rgb *basecolor.a,1.0);

vs

gl_FragColor= baseColor;

The first one

gl_FragColor=vec4(basecolor.rgb *basecolor.a,1.0);
gl_FragColor=vec4(vec3(2,.6,0) * 2, 1.0)
gl_FragColor=vec4(4, 1.2, 0, 1.0);
gl_FragColor=vec4(1, 1, 0, 1);   // because gl_FragColor is clamped. This is YELLOW

The second one

gl_FragColor=baseColor;
gl_FragColor=vec4(2,.6,0, 2);
gl_FragColor=vec4(1, .6, 0, 1);   // because gl_FragColor is clamped. This is ORANGE

It makes no sense these would be the same in Unity. They are clearly not the same color.

[NichijouCC]

It is the HDR In Untiy3d that cause the different render result between unity3d and webgl.
when close HDR,they are the same.
by the way, your articles help me so much when l learn webgl.

[greggman]

I don't know what the issue is but it's certainly possible there's a bug in Unity. Unity can generate difference shaders depending on the platform and depending on the features of the user's computer as well as whatever material options you choose

[greggman]

I know this is old but just in case someone else reads this you can add this

<script src="https://greggman.github.io/webgl-helpers/webgl-log-shaders.js"></script>

in your unity html to see the shaders as unity compiles them.

or you can copy and paste this into the devtools console on a running page

(()=>{const s = document.createElement('script');s.src='https://greggman.github.io/webgl-helpers/webgl-dump-shaders.js';document.firstElementChild.appendChild(s)})();

To see the shaders as they are used

Both are from here