EnvMap in CocosCreator

We wanted to get envmap effect implemented to ensure that we are able to show shiny surfaces. Since it wasn't clearly defined or showcased for cocos creator, i assumed it might not work. I wanted to make sure its' easy to setup so we don't loose a lot of time setting up a whole new renderer.

Fortunately, the cocos creator engine has already setup the required pieces in place to get this working. I've been able to get this working on Cocos Creator 2.2.2. Here is the gist for implementing the same.

Here is how it looks in action :

	// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
	CCEffect %{
	techniques:
	- passes:
	- vert: vs
	frag: fs
	depthStencilState:
	depthTest: true
	depthWrite: true
	blendState:
	targets:
	- blend: true
	rasterizerState:
	cullMode: none
	properties:
	tilingOffset: { value: [1.0, 1.0, 0.0, 0.0] }
	baseColorMap: { value: white }
	skyBox: { value: white }
	}%
	CCProgram vs %{
	precision highp float;
	#include <cc-global>
	#include <cc-local>
	#include <input-standard>
	out vec3 v_position;
	out vec2 v_uv;
	out vec3 v_normal;
	out vec3 v_camPos;
	uniform ToonVert {
	vec4 tilingOffset;
	};
	void main () {
	StandardVertInput In;
	CCVertInput(In);
	vec4 pos = cc_matWorld * In.position;
	v_position = pos.xyz;
	v_uv = In.uv * tilingOffset.xy + tilingOffset.zw;
	v_normal = (cc_matWorldIT * vec4(In.normal, 0.0)).xyz;
	v_camPos = cc_cameraPos.xyz;
	gl_Position = cc_matViewProj * pos;
	}
	}%
	CCProgram fs %{
	precision highp float;
	#include <cc-global>
	#include <shading-toon>
	#include <encodings>
	in vec3 v_position;
	in vec2 v_uv;
	in vec3 v_camPos;
	in vec3 v_normal;
	#if USE_BASE_COLOR_MAP
	uniform sampler2D baseColorMap;
	#endif
	#if USE_SPECULAR_MAP
	uniform sampler2D specularMap;
	#endif
	uniform samplerCube skyBox;
	void main () {
	vec3 I = normalize(v_position - v_camPos);
	vec3 normal = normalize(v_normal);
	vec3 R = reflect(I, normal);
	vec4 color = vec4(texture(skyBox, R).rgb, 1.0) + 0.125 * texture2D(baseColorMap, v_uv);
	gl_FragColor = color;
	}
	}%

view raw envmap.effect hosted with ❤ by GitHub

	cc.Class({
	extends: cc.Component,
	properties: {
	images: {
	default: [],
	type: cc.Texture2D
	},
	refMat: {
	default: null,
	type: cc.Material
	}
	},
	start () {
	var img = [];
	for(var i = 0; i < 6; i++){
	img.push(this.images[i]._image);
	}
	var options = {
	'width':512,
	'height':512,
	'images': [img]
	};
	var tc = new cc.gfx.TextureCube(cc.renderer.device, options);
	this.refMat.setProperty("skyBox", tc);
	var rotAction = cc.rotate3DBy(1, cc.v3(0, 10, 0));
	this.node.runAction(rotAction.repeatForever());
	},
	});

view raw EnvMap.js hosted with ❤ by GitHub