如何制作一个透明渐变的shader
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何制作一个透明渐变的shader相关的知识,希望对你有一定的参考价值。
想制作一个地球球体,将地球的半透明贴图贴到球体上,在球表面从中间到四周透明渐变。
参考技术A Shader "Law/TShader" Properties _MainTex ("Texture", 2D) = "white" SubShader Tags "Queue"="Transparent" LOD 100 Pass Blend SrcAlpha OneMinusSrcAlpha zwrite off CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f float2 uv : TEXCOORD0; float3 normal:NORMAL; float4 vertex : SV_POSITION; ; sampler2D _MainTex; float4 _MainTex_ST; uniform float4 _ViewDir; v2f vert (appdata_full v) v2f o; o.vertex =mul(UNITY_MATRIX_MVP,v.vertex); o.uv = TRANSFORM_TEX(v.texcoord, _MainTex); o.normal = v.normal;本回答被提问者采纳HTML5 画布覆盖透明渐变
【中文标题】HTML5 画布覆盖透明渐变【英文标题】:HTML5 canvas overlay transparent gradients 【发布时间】:2014-03-13 09:01:37 【问题描述】:我正在 HTML5 中创建一个颜色选择器,如下面的渐变
它由三个元素组成:
-
纯红色背景色(必须可更改)
黑色 - 从底部到顶部的透明渐变
从左到右的白色透明渐变
我设法创建了一个渐变和一个颜色,但我不知道如何将纯色和两个渐变叠加在一起。我怎样才能做到这一点?
(我可以提供我的代码,但它非常通用,没有用处)
【问题讨论】:
【参考方案1】:您可以将两个渐变叠加在一起:
Fiddle demo
水平渐变
从白色到您想要使用的颜色(HUE 度数),饱和度为 100%,亮度为 50%:
var grH = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
grH.addColorStop(0, '#fff');
grH.addColorStop(1, 'hsl(' + hue + ', 100%, 50%)');
ctx.fillStyle = grH;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
垂直
从黑色底部到顶部透明。
var grV = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
grV.addColorStop(0, 'rgba(0,0,0,0)');
grV.addColorStop(1, '#000');
ctx.fillStyle = grV;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
结果
先画水平线,再画垂直线,结果如下:
就像在demo 中一样,创建一个滑块来更新色调调色板很容易。您无需像演示中那样重新创建黑色到透明渐变 - 只需将其缓存到屏幕外画布并在每次更新时重新使用它,因为这样可以提高性能。
希望这会有所帮助。
【讨论】:
完美的答案,以及包含滑块的额外荣誉! 395 是返回红色的真正最大值吗?我原以为它会是 255 之类的东西。 @Keavon 没问题! :) 你的意思是色相值?也就是说,0-359 度 360=0 都是红色的。您从中获得的 RGB 值将在每个组件的 0-255 范围内。 是的,我在之前的评论中输入了错误的值,我的意思是我在滑块的最大值中看到的 359。 360 有意义! fiddle 死了,太糟糕的代码不在这里了。【参考方案2】:我不认为颜色选择器使用你想出的方法是“正确的”。因为白色透明渐变会使左下角变成白色,但它应该是黑色的。
我基于这个answer 创建了一个jsfiddle。它仍然倾斜,但我认为您可以自己解决这个问题:
function draw(hue)
var canvas = document.getElementById("hsl-square");
var ctx = canvas.getContext('2d');
for(row=0; row<=100; row++)
var grad = ctx.createLinearGradient(0, 0, 100,0);
grad.addColorStop(0, 'hsl('+hue+', 0%, '+(row)+'%)');
grad.addColorStop(1, 'hsl('+hue+', 100%, '+(row/2)+'%)');
ctx.fillStyle=grad;
ctx.fillRect(0, row, 100, 1);
console.log(row, row/2);
draw(64);
还有一个适用于大多数现代浏览器的新 html5 颜色输入:http://jsfiddle.net/4FMJM/1/
<form>
Select color: <input type="color" name="your-color">
<input type="submit">
</form>
【讨论】:
以上是关于如何制作一个透明渐变的shader的主要内容,如果未能解决你的问题,请参考以下文章