Skip to content

Commit 698ed6e

Browse files
roamzhenroamzhen
committed
(feat)xr-frame: 更新案例
1 parent 3af4735 commit 698ed6e

File tree

28 files changed

+2167
-8
lines changed

28 files changed

+2167
-8
lines changed

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/index.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
// 着色器
2+
import dissolveVert from './shaders/dissolveVert';
3+
import dissolveFrag from './shaders/dissolveFrag';
4+
5+
const xrFrameSystem = wx.getXrFrameSystem();
6+
7+
Component({
8+
behaviors: [require('../../common/share-behavior').default],
9+
properties: {
10+
width: {
11+
type: Number
12+
},
13+
height: {
14+
type: Number
15+
},
16+
thresHold: {
17+
type: Number,
18+
value: 0,
19+
},
20+
autoPlay: {
21+
type: Boolean,
22+
value: false,
23+
},
24+
},
25+
data: {
26+
loaded: false,
27+
},
28+
lifetimes: {
29+
async attached() {
30+
console.log('data', this.data)
31+
},
32+
detached() {
33+
}
34+
},
35+
pageLifetimes: {
36+
hide() {
37+
},
38+
show() {
39+
}
40+
},
41+
methods: {
42+
handleReady({
43+
detail
44+
}) {
45+
console.log('scene progress', detail.value);
46+
this.scene = detail.value;
47+
this.camera = this.scene.getElementById('camera');
48+
this.root = this.scene.getElementById('root');
49+
this.offset = - 0.005;
50+
},
51+
52+
handleTick(delta) {
53+
if(this.data.autoPlay){
54+
if(this.dissolveMaterial.getFloat('u_threshold') < 0){
55+
this.dissolveMaterial.setFloat('u_threshold', 0);
56+
this.offset = 0.005;
57+
}
58+
if(this.dissolveMaterial.getFloat('u_threshold') > 1){
59+
this.dissolveMaterial.setFloat('u_threshold', 1);
60+
this.offset = - 0.005;
61+
}
62+
this.dissolveMaterial.setFloat('u_threshold', this.dissolveMaterial.getFloat('u_threshold') + this.offset);
63+
}else{
64+
this.dissolveMaterial.setFloat('u_threshold', this.data.thresHold);
65+
}
66+
},
67+
68+
handleAssetsProgress: function ({
69+
detail
70+
}) {
71+
console.log('assets progress', detail.value);
72+
},
73+
74+
handleAssetsLoaded: function ({
75+
detail
76+
}) {
77+
console.log('assets loaded', detail.value);
78+
this.setData({
79+
loaded: true
80+
});
81+
82+
this.dissolveMaterial = this.scene.createMaterial(this.createDissolveEffect(), {
83+
u_mainTexture: this.scene.assets.getAsset('texture', 'surface_texture1'),
84+
u_mainTexture2: this.scene.assets.getAsset('texture', 'surface_texture2'),
85+
u_noiseTexture: this.scene.assets.getAsset('texture', 'noise_texture'),
86+
});
87+
88+
const geometryPlane = this.scene.assets.getAsset('geometry', 'plane');
89+
const planeElem = this.scene.createElement(xrFrameSystem.XRNode, {
90+
position: "0 0 0",
91+
scale: "3 3 3",
92+
});
93+
94+
// this.dissolveMaterial.setVector('u_firstColor', xrFrameSystem.Vector4.createFromNumber(1.0, 0.0, 0.0, 1.0));
95+
// this.dissolveMaterial.setVector('u_secondColor', xrFrameSystem.Vector4.createFromNumber(0.0, 1.0, 0.0, 1.0));
96+
planeElem.addComponent(xrFrameSystem.Mesh, {
97+
geometry: geometryPlane,
98+
material: this.dissolveMaterial,
99+
});
100+
// 加到场上
101+
this.root.addChild(planeElem);
102+
103+
// 绑定tick事件
104+
this.scene.event.add('tick', this.handleTick.bind(this));
105+
},
106+
107+
108+
createDissolveEffect() {
109+
const effect = this.scene.createEffect({
110+
name: 'dissolveEffect',
111+
properties: [
112+
{ key: 'u_firstColor', type: xrFrameSystem.EUniformType.FLOAT4, default: [1, 0, 0, 1] },
113+
{ key: 'u_secondColor', type: xrFrameSystem.EUniformType.FLOAT4, default: [0, 1, 0, 1] },
114+
{ key: 'u_threshold', type: xrFrameSystem.EUniformType.FLOAT, default: [0.5] },
115+
{ key: 'u_edgeWidth', type: xrFrameSystem.EUniformType.FLOAT, default: [0.1] },
116+
],
117+
images: [
118+
{
119+
key: 'u_mainTexture',
120+
default: 'white',
121+
macro: 'WX_USE_BASECOLORMAP'
122+
},
123+
{
124+
key: 'u_mainTexture2',
125+
default: 'white',
126+
macro: 'WX_USE_BASECOLORMAP'
127+
},
128+
{
129+
key: 'u_noiseTexture',
130+
default: 'white',
131+
macro: 'WX_USE_BASECOLORMAP'
132+
}
133+
],
134+
defaultRenderQueue: 2000,
135+
passes: [
136+
{
137+
"renderStates": {
138+
cullOn: false,
139+
blendOn: false,
140+
depthWrite: true,
141+
depthTestOn: true,
142+
cullFace: xrFrameSystem.ECullMode.BACK,
143+
},
144+
lightMode: "ForwardBase",
145+
useMaterialRenderStates: false,
146+
shaders: [0, 1]
147+
}],
148+
shaders: [
149+
dissolveVert,
150+
dissolveFrag,
151+
],
152+
})
153+
return effect;
154+
},
155+
}
156+
})

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/index.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame",
5+
"disableScroll": true
6+
}

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/index.wxml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<xr-scene id="xr-scene" bind:ready="handleReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="texture" asset-id="surface_texture1" src="https://holodata.s3.cn-northwest-1.amazonaws.com.cn/nameCardData/mingpiantu.png" />
4+
<xr-asset-load type="texture" asset-id="surface_texture2" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/waifu.png" />
5+
<xr-asset-load type="texture" asset-id="noise_texture" src="http://dldir1.qq.com/weixin/checkresupdate/noise_bf2307bb2d5c42e8ad946134c7b071bd.png"/>
6+
</xr-assets>
7+
<xr-node>
8+
<xr-shadow id="root"></xr-shadow>
9+
<xr-node id="camera-target" node-id="camera-target" position="0 0 0"></xr-node>
10+
<xr-camera id="camera" node-id="camera" position="2 3 -5" clear-color="0.96 0.96 0.96 1" target="camera-target" near="0.1" far="2000" camera-orbit-control="" background="skybox"></xr-camera>
11+
</xr-node>
12+
<xr-node node-id="lights">
13+
<xr-light type="ambient" color="1 1 1" intensity="1.2" />
14+
<xr-light type="directional" rotation="40 0 0" color="1 1 1" intensity="3" cast-shadow />
15+
</xr-node>
16+
</xr-scene>

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/index.wxss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/shaders/dissolveFrag.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default `#version 100
2+
precision mediump float;
3+
precision highp int;
4+
varying highp vec2 v_UV;
5+
6+
uniform float u_threshold;
7+
uniform float u_edgeWidth; // 边缘宽度
8+
uniform vec4 u_firstColor;
9+
uniform vec4 u_secondColor;
10+
11+
uniform sampler2D u_mainTexture;
12+
uniform sampler2D u_mainTexture2;
13+
uniform sampler2D u_noiseTexture;
14+
15+
void main()
16+
{
17+
float cutout = texture2D(u_noiseTexture, v_UV).r;
18+
vec4 mainColor;
19+
vec4 color;
20+
if (cutout < u_threshold)
21+
{
22+
mainColor = texture2D(u_mainTexture2, v_UV);
23+
color = mainColor;
24+
}
25+
else
26+
{
27+
mainColor = texture2D(u_mainTexture, v_UV);
28+
float factor = clamp((cutout - u_threshold) / u_edgeWidth, 0.0, 1.0);
29+
vec4 edgeColor = mix(u_firstColor, u_secondColor, factor);
30+
color = mix(edgeColor, mainColor, factor);
31+
}
32+
gl_FragColor = vec4(color.rgb, 1.0);
33+
}
34+
35+
`

‎miniprogram/packageXRFrame/components/template/xr-template-dissolve/shaders/dissolveVert.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default `#version 100
2+
uniform highp mat4 u_view;
3+
uniform highp mat4 u_projection;
4+
uniform highp mat4 u_world;
5+
6+
attribute vec3 a_position;
7+
attribute highp vec2 a_texCoord;
8+
9+
varying highp vec2 v_UV;
10+
11+
void main(){
12+
v_UV = a_texCoord;
13+
gl_Position = u_projection * u_view * u_world * vec4(a_position, 1.0);
14+
}
15+
`

‎miniprogram/packageXRFrame/components/template/xr-template-geometry/index.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -135,25 +135,21 @@ Component({
135135
name: "a_position",
136136
format: xrFrameSystem.EVertexFormat.FLOAT3,
137137
offset: 0,
138-
usage: xrFrameSystem.EVertexLayoutUsage.POSITION
139138
},
140139
{
141140
name: "a_normal",
142141
format: xrFrameSystem.EVertexFormat.FLOAT3,
143142
offset: 12,
144-
usage: xrFrameSystem.EVertexLayoutUsage.NORMAL,
145143
},
146144
{
147145
name: "a_texCoord",
148146
format: xrFrameSystem.EVertexFormat.FLOAT2,
149147
offset: 24,
150-
usage: xrFrameSystem.EVertexLayoutUsage.UV0
151148
},
152149
{
153150
name: "a_color",
154151
format: xrFrameSystem.EVertexFormat.FLOAT4,
155152
offset: 32,
156-
usage: xrFrameSystem.EVertexLayoutUsage.COLOR
157153
}
158154
],
159155
stride: 48

‎miniprogram/packageXRFrame/components/template/xr-template-pbr/index.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
3+
Component({
4+
behaviors: [require('../../common/share-behavior').default],
5+
properties: {
6+
a: Number,
7+
},
8+
data: {
9+
loaded: false
10+
},
11+
lifetimes: {},
12+
methods: {
13+
handleReady({detail}) {
14+
const xrScene = this.scene = detail.value;
15+
console.log('xr-saaacene', xrScene);
16+
17+
},
18+
handleAssetsProgress: function({detail}) {
19+
console.log('assets progress', detail.value);
20+
},
21+
handleAssetsLoaded: function({detail}) {
22+
console.log('assets loaded', detail.value);
23+
24+
// 延时保证 glTF 解析完毕
25+
setTimeout(() => {
26+
this.setToon();
27+
}, 200);
28+
29+
},
30+
setToon() {
31+
const scene = this.scene;
32+
const xrFrameSystem = wx.getXrFrameSystem()
33+
34+
const gltfElement = scene.getElementById("gltf");
35+
const gltf = gltfElement.getComponent(xrFrameSystem.GLTF);
36+
37+
console.log('custom-pbr gltf', gltf);
38+
39+
for(const mesh of gltf.meshes) {
40+
console.log('custom-pbr mesh material', mesh.material)
41+
42+
console.log('custom-pbr effect', scene.assets.getAsset('effect', 'custom-pbr'));
43+
44+
const pbrMaterial = scene.createMaterial(
45+
// 使用定制的效果
46+
scene.assets.getAsset('effect', 'custom-pbr'),
47+
{
48+
u_brdfLUT: mesh.material.getTexture('u_brdfLUT'),
49+
u_baseColorMap: mesh.material.getTexture('u_baseColorMap'),
50+
u_metallicRoughnessMap: mesh.material.getTexture('u_metallicRoughnessMap'),
51+
u_normalMap: mesh.material.getTexture('u_normalMap'),
52+
u_emissiveMap: mesh.material.getTexture('u_emissiveMap'),
53+
u_emissiveFactor: mesh.material.getTexture('u_emissiveFactor'),
54+
u_occlusionMap: mesh.material.getTexture('u_occlusionMap'),
55+
u_clearcoatMap: mesh.material.getTexture('u_clearcoatMap'),
56+
u_specularGlossinessMap: mesh.material.getTexture('u_specularGlossinessMap'),
57+
u_transmissionMap: mesh.material.getTexture('u_transmissionMap'),
58+
u_sheenColorMap: mesh.material.getTexture('u_sheenColorMap'),
59+
u_metallicMap: mesh.material.getTexture('u_metallicMap'),
60+
u_roughnessMap: mesh.material.getTexture('u_roughnessMap'),
61+
u_clearcoatRoughnessMap: mesh.material.getTexture('u_clearcoatRoughnessMap'),
62+
u_clearcoatNormalMap: mesh.material.getTexture('u_clearcoatNormalMap'),
63+
u_sheenRoughnessMap: mesh.material.getTexture('u_sheenRoughnessMap'),
64+
u_specularEnvMapMat: mesh.material.getTexture('u_specularEnvMapMat'),
65+
}
66+
);
67+
68+
console.log('custom-pbr material', pbrMaterial);
69+
mesh.material = pbrMaterial;
70+
}
71+
72+
}
73+
}
74+
})

‎miniprogram/packageXRFrame/components/template/xr-template-pbr/index.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame"
5+
}

‎miniprogram/packageXRFrame/components/template/xr-template-pbr/index.wxml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<xr-scene id="xr-scene" bind:ready="handleReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="gltf" asset-id="gltf-toon" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.gltf" />
4+
<xr-asset-load
5+
type="env-data" asset-id="env1" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/env-test.bin"
6+
/>
7+
<xr-asset-material asset-id="pbr" effect="custom-pbr" />
8+
</xr-assets>
9+
<xr-node>
10+
<xr-env env-data="env1" />
11+
<xr-node node-id="camera-target" position="0 0 0"></xr-node>
12+
<xr-mesh node-id="floor-plane" position="0 -2 0" rotation="0 0 0" scale="10 1 10" geometry="plane"
13+
uniforms="u_baseColorFactor:1 1 1 1" receive-shadow
14+
></xr-mesh>
15+
<xr-gltf id="gltf" position="0 0 0" scale="2 2 2" model="gltf-toon" material="pbr" cast-shadow></xr-gltf>
16+
17+
<xr-camera
18+
id="camera" node-id="camera" position="2 2 4" clear-color="0.96 0.96 0.96 1"
19+
target="camera-target" near="0.1" far="2000"
20+
camera-orbit-control="" background="skybox"
21+
></xr-camera>
22+
</xr-node>
23+
<xr-node node-id="lights">
24+
<xr-light type="ambient" color="1 1 1" intensity="1.2" />
25+
<xr-light type="directional" rotation="120 20 0" color="1 1 1" intensity="2" cast-shadow />
26+
</xr-node>
27+
</xr-scene>

0 commit comments

Comments
 (0)