Skip to content

Instantly share code, notes, and snippets.

@vkbsb vkbsb/EnvMap.js

Last active Jan 26, 2020
Embed
What would you like to do?
Effects file for cocos creator 2.2.2 to create the envmap effect.
// 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;
}
}%
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());
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.