CocosCreator 는 그 어 진 위치 표시 무늬 를 어떻게 실현 합 니까?

1.프로젝트 수요
프로젝트 는 하나의 기능 이 필요 합 니 다.빛 이 지나 가 는 경로 일 때 이 경로 의 위 치 는 모두 밝 아 지 는 기능 입 니 다.
2.자료 내용
기능 은 이 큰 신의 지우개 기능 과 유사 하 다.https://forum.cocos.org/t/2-0-8/74246

그러나 프로젝트 의 수요 가 지나 가 야 할 경로 주변 에 모호 한 바깥쪽 이 있다.즉,중심 에서 가장자리 까지 점점 어 두 워 지 는 것 이다.
그래서 인터넷 대 신의 shader 예 를 참고 하여 다음 과 같은 예 를 들 었 다.

큰 신의 어깨 에 약간의 변경 을 해서 프로젝트 의 수 요 를 실현 했다.
3.프로젝트 예시
다음은 나의 테스트 항목 의 예 이다.

(이 찌꺼기 의 화질 을 무시 하고 녹화 프로그램 을 설치 하 는 것 이 귀 찮 습 니 다)
4.프로젝트 코드
SliderPointLight.ts

const {
	ccclass,
	property
} = cc._decorator;


@ccclass

export default class Follow_spot extends cc.Component {

	@property(cc.Node)

	bg: cc.Node = null;

	material: cc.Material = null;

	center: number[] = [0.5, 0.5];

	testArr: number[] = [];


	onLoad() {

		this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);

		this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);

		this.material.setProperty('center', this.center);


		//js         ,         *        

		this.material.setProperty('colorArr', new Float32Array(400));

		//                           

		this.material.setProperty('colorArr', []);


		this.bg.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);

	}


	touchMoveEvent(evt: cc.Event.EventTouch) {

		this.center[0] = evt.getLocation().x / this.bg.width;

		this.center[1] = 1 - evt.getLocation().y / this.bg.height;

		console.log(this.center);

		this.material.setProperty('center', this.center);

		if (this.testArr.length >= 400) {

			this.testArr.shift();

			this.testArr.shift();

		}

		this.testArr.push(this.center[0]);

		this.testArr.push(this.center[1]);



		//js         ,         *        

		this.material.setProperty('colorArr', new Float32Array(this.testArr));

		//                           

		this.material.setProperty('colorArr', this.testArr);

	}

}



SliderPointLight.effect


CCEffect % {

		techniques:

			-passes:

			-vert: vs

		frag: fs

		blendState:

			targets:

			-blend: true

		rasterizerState:

			cullMode: none

		properties:

			texture: {
				value: white
			}

		wh_ratio: {

			value: 1.78,

			editor: {

				tooltip: "   "

			}

		}

		blur: {

			value: 0.35,

			editor: {

				tooltip: "      "

			}

		}

		radius: {

			value: 0.5,

			editor: {

				tooltip: "    "

			}

		}

		center: {

			value: [0.5, 0.5],

			editor: {

				tooltip: "    "

			}

		}

		colorArr: {
			value: [0.5, 0.5, 0.5, 0.5]
		}

	} %



	CCProgram vs % {

		precision highp float;


		#include <cc-global>

		#include <cc-local>


		in vec3 a_position;

		in vec4 a_color;

		out vec4 v_color;


		#if USE_TEXTURE

		in vec2 a_uv0;

		out vec2 v_uv0;

		#endif


		void main() {

			vec4 pos = vec4(a_position, 1);


			#if CC_USE_MODEL

			pos = cc_matViewProj * cc_matWorld * pos;

			#else

			pos = cc_matViewProj * pos;

			#endif


			#if USE_TEXTURE

			v_uv0 = a_uv0;

			#endif


			v_color = a_color;


			gl_Position = pos;

		}

	} %


	CCProgram fs % {


		precision highp float;


		#include <alpha-test>


		in vec4 v_color;


		#if USE_TEXTURE

		in vec2 v_uv0;

		uniform sampler2D texture;

		#endif


		uniform ARGS {

			float radius;

			float blur;

			vec2 center;

			float wh_ratio;

		};


		//effect  

		uniform Metaball {

			vec4 colorArr[100];

		};


		void main() {

			vec4 o = vec4(1, 1, 1, 0);

			o *= texture(texture, v_uv0);

			o *= v_color;

			float circle = radius * radius;

			for (int i = 0; i < 100; i++) {

				float colorX = colorArr[i].x;

				float colorY = colorArr[i].y;

				float rx = colorX * wh_ratio;

				float ry = colorY;

				float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);


				o.a = smoothstep(circle, circle - blur, dis) + o.a;

			}


			gl_FragColor = o;

		}

	}%

이상 은 바로 CocosCreator 가 그 어 진 위치 에 무늬 를 표시 하 는 상세 한 내용 입 니 다.CocosCreator 에 관 한 자 료 는 저희 의 다른 관련 글 에 주목 하 세 요!