企业官网建设流程全解析

wordlink网站开发,网站优化要做哪些工作,怎样做网站的背景图片,闵行网站制作设计公司视频教程 视频教程 vec4 o texture(cc_spriteTexture,uv);有图片获取图片 现在是用在label 获取字 透明部分不会获取 float beamPos mod(cc_time.x -0.3, 3.0) ; 设定圆心位置 将光柱想象成圆形 获取圆心位置 计算遍历所有像素点到圆心的距离 如果在glow代表圆的范围 如果在范…视频教程 视频教程vec4 o texture(cc_spriteTexture,uv);有图片获取图片 现在是用在label 获取字 透明部分不会获取float beamPos mod(cc_time.x -0.3, 3.0) ;设定圆心位置 将光柱想象成圆形 获取圆心位置 计算遍历所有像素点到圆心的距离 如果在glow代表圆的范围 如果在范围内 发光 如果不在 不发光 这里用cc——time能自动增加x位置 mod 3是在time.x跟3循环float dist abs(uv.x - beamPos);计算当前点到园新距离if(dist glow) { // 固定光柱宽度为0.1 glow是光柱范围 也就是园的范围// 如果完全透明直接返回if (o.a 0.01) {return o;}float strength 1.0 - dist / glow; vec3 glowEffect mix(vec3(1.0), glowColor.rgb, dist / glow);这两行创造了两种渐变效果第一行发光强度渐变GLSLfloat strength 1.0 - dist / glow;工作方式dist / glow标准化距离距离 ÷ 半径中心0.0 / 0.1 0 → strength 1.0半路0.05 / 0.1 0.5 → strength 0.5边缘0.1 / 0.1 1.0 → strength 0.0效果中心最亮边缘渐暗TEXT强度变化┌─────────┬─────────┬─────────┐│ 距离0 │ 距离0.05│ 距离0.1 ││强度1.0 │强度0.5 │强度0.0 ││最亮 │中亮 │不亮 │└─────────┴─────────┴─────────┘第二行颜色渐变GLSLvec3 glowEffect mix(vec3(1.0), glowColor.rgb, dist / glow);mix() 函数是什么TEXTmix(颜色A, 颜色B, 混合比例)混合比例0 → 返回颜色A混合比例1 → 返回颜色B混合比例0.5 → 返回A和B中间的颜色实际变化假设 glowColor [1.0, 0.0, 0.0]红色TEXT中心 (dist/glow0.0):mix([1,1,1], [1,0,0], 0.0) [1,1,1] (白色)中间 (dist/glow0.5):mix([1,1,1], [1,0,0], 0.5) [1,0.5,0.5] (粉红色)↑ 红色: 1.0保持不变↑ 绿色: 1.0→0.5↑ 蓝色: 1.0→0.5边缘 (dist/glow1.0):mix([1,1,1], [1,0,0], 1.0) [1,0,0] (纯红色)组合效果TEXT像素位置 | 光柱中心 → 光柱边缘距离/半径 (dist/glow) | 0.0 → 0.2 → 0.4 → 0.6 → 0.8 → 1.0强度 (strength) | 1.0 → 0.8 → 0.6 → 0.4 → 0.2 → 0.0颜色 (glowEffect) | 纯白 → 接近白 → 中间色 → 接近glowColor → glowColor视觉渐变TEXT光柱里面┌─────────────────┐│ 白色 淡黄色 黄色 深黄 ││ 中心 ↑ ↑ 边缘 ││ (最亮) (中亮) (光色) (最暗)│└─────────────────┘白光慢慢过渡到glowColor的黄色同时亮度从最亮逐渐变暗为啥这样设计视觉上更自然GLSL// 不好的设计硬边if (dist glow) {o.rgb glowColor; // 整个光柱一个颜色}// 实际设计渐变o.rgb original.rgb glowEffect * strength;// 中心白色 强光 最亮// 边缘glowColor 弱光 柔和过渡2. 物理模拟真实的光中心高温 → 偏白边缘冷却 → 偏光柱颜色就像一根加热的铁棒TEXT中心(最热)白炽色向外红色边缘暗红色3. 示例对比假设glowColor是[1.0, 0.8, 0.3]橙黄没有渐变硬边TEXT整个光柱都是 [1.0, 0.8, 0.3]效果一个平板色块有渐变变化TEXT中心 [1.0, 1.0, 1.0] ← 白色亮度1.0↓半程 [1.0, 0.9, 0.65] ← 偏白黄色亮度0.5↓边缘 [1.0, 0.8, 0.3] ← 目标色亮度0.0翻译成中文TEXTstrength 1.0 - (距离 ÷ 光柱半径) ← 发光强度亮→暗glowEffect 从白色渐变到glowColor ← 颜色变化白→黄最终效果公式TEXT最终颜色 原始颜色 (glowEffect × strength)就象给一个图案涂上一层从白到黄的颜色颜色渐变再根据位置调整这层的透明度强度渐变叠加到原始图案上这样既有颜色的变化又有亮度的变化看起来更真实✨简单说让光柱中心白热化慢慢过渡到边缘的金色✨同时越来越暗。beampos是圆心 dist是计算当前点到圆心的距离 这个距离小于glow 发光 glow控制发光大小 完全正确100%正确 你现在的理解完全准确精准概括TEXTbeamPos 圆心位置X坐标dist 当前点到圆心的距离X方向的距离glow 发光半径控制光柱大小if(dist glow) 如果这个点在发光圆内就发光用几何图表验证你的理解TEXT圆心beamPos 0.5半径glow 0.2屏幕坐标轴0~10.3 0.4 0.5 0.6 0.7│ │ │ │ │├──────┼──────┼──────┼──────┤│ │●●●●●●│●●●●●●│ ││ │●发光●│●发光●│ ││ │●●●●●●│●●●●●●│ ││ │ │ │ ││0.3 │0.4 │0.5 │0.6 │0.7│○ │● │● │● │○│不发光│发光 │发光 │发光 │不发光数学验证每个点点位置 距离计算 是否发光uv.x0.3 0.3-0.5uv.x0.35 0.35-0.5uv.x0.5 0.5-0.5uv.x0.65 0.65-0.5uv.x0.7 0.7-0.5参数控制的关系GLSLfloat beamPos mod(cc_time.x -0.3, 3.0);// 圆心随时间水平移动speed1/3周期3秒float dist abs(uv.x - beamPos);// 当前点到圆心的距离if(dist glow) {// glow越大 → 光柱越宽// glow越小 → 光柱越窄}调节演示glow 0.1小半径TEXT0.4 0.5 0.6│ │ │├───────┼───────┤│ │●●●●●●●││ │●发光 ●││ │●●●●●●●││ │ ││0.4 │0.5 │0.6│○ │● │○│不发光 │发光 │不发光发光范围0.45~0.55glow 0.3大半径TEXT0.2 0.5 0.8│ │ │├─────────────┼─────────────┤│●●●●●●●●●●●●│●●●●●●●●●●●●││● 发光 ●││●●●●●●●●●●●●│●●●●●●●●●●●●││ │ ││0.2 │0.5 │0.8│● │● │●│发光 │发光 │发光发光范围0.35~0.65为什么用glow这个名字虽然叫发光但其实控制的是发光区域的大小glow 0.03 → 很细的光柱glow 0.15 → 中等光柱glow 0.3 → 很宽的光柱最终效果链TEXTcc_time → beamPos → dist → if(dist glow) → 发光强度计算↑ ↑ ↑ ↑ ↑时间 圆心位置 距离 区域判断 渐变效果总结你的正确理解✅ beamPos 圆心位置随时间移动✅ dist 点到圆心距离X方向✅ glow 发光半径控制光柱大小✅ if(dist glow) 点在圆内就发光这就是Shader计算光柱的基本原理你现在掌握核心了✨第一行RGB颜色合成GLSLo.rgb original.rgb glowEffect * strength;拆解每个部分TEXToriginal.rgb - 原来的颜色文字本身的颜色glowEffect - 发光颜色从白色渐变到glowColorstrength - 发光强度中心1.0边缘0.0 原来的颜色 发光颜色×强度实际计算过程假设original.rgb [0.3, 0.3, 0.3]灰色文字glowEffect [1.0, 0.9, 0.5]暖白色strength 0.6中等强度TEXT计算原始颜色 [0.3, 0.3, 0.3]发光贡献[1.0, 0.9, 0.5] × 0.6 [0.6, 0.54, 0.3]最终颜色[0.30.6, 0.30.54, 0.30.3] [0.9, 0.84, 0.6]结果灰色文字 → 亮黄色加法混合的效果TEXT原始颜色 发光效果 最终颜色(基础色) (叠加光) (发光后的颜色)[黑/灰] [光色×强度] [亮色]就像现实中的光照TEXT黑色墙面 手电筒光 被照亮的部分变亮第二行Alpha透明度处理GLSLo.a max(original.a, strength);理解 max() 函数max(a, b) 返回a和b中较大的那个值TEXToriginal.a - 原来的透明度文字处0透明处0strength - 发光强度1.0→0.0o.a 取这两者中较大的值实际效果情况1光柱经过非文字区域TEXToriginal.a 0.0完全透明strength 0.3光柱强度o.a max(0.0, 0.3) 0.3结果原本透明的地方因为光柱变得半透明情况2光柱经过文字区域TEXToriginal.a 0.8文字透明度strength 0.3光柱强度o.a max(0.8, 0.3) 0.8结果保持文字的不透明度情况3光柱中心经过文字TEXToriginal.a 0.8strength 1.0中心最强o.a max(0.8, 1.0) 1.0结果文字在光柱中心处完全不透明整体效果演示例子光柱扫过文字TEXT原始文字 “Hello” (灰色alpha0.9)没有光柱的地方 保持灰色光柱边缘经过 “He[黄色模糊]llo”光柱中心经过 “[亮白光]ello”分步变化假设文字是一个像素点TEXT时间原始颜色strength发光颜色最终颜色alpha前[0.3,0.3,0.3]0.0[1.0,0.9,0.5][0.3,0.3,0.3]0.9边缘[0.3,0.3,0.3]0.3[1.0,0.9,0.5][0.6,0.57,0.45]max(0.9,0.3)0.9中心[0.3,0.3,0.3]0.9[1.0,0.9,0.5][1.2,1.11,0.75]max(0.9,0.9)0.9为什么这样设计RGB是加法混合TEXTo.rgb A B 相加会变亮目的模拟光照效果光叠加在表面上对比另一种方法乘法混合GLSLo.rgb original.rgb * glowEffect; // 相乘会使颜色变暗// 不适合发光效果2. Alpha用max函数保护文字TEXTalpha max(原始alpha, 强度)保证了光柱再强也不会让文字变透明但能让原本透明的地方显出光晕可能的问题颜色过曝超过1.0在光柱中心GLSLo.rgb [0.3,0.3,0.3] [1.0,1.0,1.0]*1.0 [1.3,1.3,1.3] ← 超过1.0解决方法clampGLSLo.rgb original.rgb glowEffect * strength;o.rgb min(o.rgb, vec3(1.0)); // 限制不超过1.0视觉比喻TEXT想象一个灰色标志牌夜间灰色原始颜色手电筒照上灰色 手电筒黄光 黄色加法手电筒中心灰色 最强白光 白热标志牌本身始终保持实体alpha不变但标志牌外的空气原来透明现在有光柱显得发亮简单说o.rgb 原色 光色×强度→ 让颜色变得更亮、更接近发光色o.a max(原透明度, 发光强度)→ 确保光柱不会让文字变透明→ 但能让透明背景显出发光这样就创造了一个貌似光柱在扫过的动态效果✨// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.// 最简兼容版光柱Shader/** glow-simple.effect **/CCEffect%{techniques:-name:glow passes:-vert:vs:vert frag:fs:frag blendState:targets:-blend:trueblendSrc:src_alpha blendDst:one_minus_src_alpha depthStencilState:depthTest:falsedepthWrite:falserasterizerState:cullMode:none properties:glowColor:{value:[1.0,0.8,0.3,1.0],editor:{type:color}}glowSpread:{value:0.04,editor:{range:[0.0,4,0.005]}}glow:{value:0.03,editor:{range:[0.01,7,0.01]}}glowIntensity:{value:0.04,editor:{range:[0.0,4,0.005]}}}%CCProgram vs%{precision highp float;#includecc-global#ifUSE_LOCAL #includebuiltin/uniforms/cc-local#endif in vec3 a_position;in vec2 a_texCoord;out vec2 uv;#ifUSE_LOCAL in vec4 a_color;out vec4 v_color;#endif vec4vert(){vec4 posvec4(a_position,1);#ifUSE_LOCAL poscc_matWorld*pos;v_colora_color;#endif poscc_matViewProj*pos;uva_texCoord;returnpos;}}%CCProgram fs%{precision highp float;#includesprite-texture#includecc-global// 添加cc_time支持in vec2 uv;uniform UBO{vec4 glowColor;// 发光颜色float glowSpread;// 发光最大半径基于 UV 坐标体系float glowIntensity;float glow;};vec4 frag(){vec4 otexture(cc_spriteTexture,uv);vec4 originalo;// 固定光柱宽度和移动速度float beamPosmod(cc_time.x-0.3,3.0);float distabs(uv.x-beamPos);if(distglow){// 固定光柱宽度为0.1//if(o.a0.0){// 计算光柱强度 (中心最强边缘最弱)// 如果完全透明直接返回if(o.a0.01){returno;}float strength1.0-dist/glow;// 从白色渐变到 glowColorvec3 centerColorglowColor.rgb*1.5;// 中心用更亮的glowColorvec3 edgeColorglowColor.rgb;vec3 glowEffectmix(centerColor,edgeColor,dist/glow);// 应用发光效果o.rgboriginal.rgbglowEffect*strength;o.amax(original.a,strength);}//}returno;}}%