index.wxml 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <xr-demo-viewer
  2. title="后处理效果案例"
  3. intro="展示了xrFrame内置的几种后处理效果。"
  4. code="{{xmlCode}}"
  5. >
  6. <xr-gltf-postprocessing
  7. disable-scroll
  8. id="main-frame"
  9. width="{{renderWidth}}"
  10. height="{{renderHeight}}"
  11. style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"
  12. type="{{type}}"
  13. blurRadius="{{blurRadius}}"
  14. bloomRadius="{{bloomRadius}}"
  15. bloomIntensity="{{bloomIntensity}}"
  16. bloomThreshold="{{bloomThreshold}}"
  17. vignetteIntensity="{{vignetteIntensity}}"
  18. vignetteSmoothness="{{vignetteSmoothness}}"
  19. vignetteRoundness="{{vignetteRoundness}}"
  20. fxaaEnabled="{{fxaaEnabled}}"
  21. bind:assetsProgress="handleProgress"
  22. bind:assetsLoaded="handleLoaded"
  23. loaded="{{loaded}}"
  24. />
  25. <view wx:if="{{!loaded}}" style="position: absolute;display: flex; justify-content: center; align-items: center; left: 0;top: 0;width: {{width}}px;height: {{height}}px;background-color: #6aa; text-align: center;line-height: 24px;">
  26. <text style="color: white;font-size: 18px;">{{progressInfo}}</text>
  27. </view>
  28. <view class="form-entry">
  29. <view class="form-entry-title">后处理类型</view>
  30. <radio-group name="pp-type" bindchange="changeType">
  31. <label class="radio-item"><radio value="blur" checked/>模糊</label>
  32. <label class="radio-item"><radio value="vignette"/>渐晕</label>
  33. <label class="radio-item"><radio value="bloom"/>泛光</label>
  34. <label class="radio-item"><radio value="fxaa"/>抗锯齿</label>
  35. </radio-group>
  36. </view>
  37. <!-- <view class="divider"></view> -->
  38. <view wx:if="{{type == 0}}" class="form-entry">
  39. <view class="form-entry-title">模糊半径</view>
  40. <slider bindchange="changeBlurRadius" value="{{blurRadius}}"></slider>
  41. </view>
  42. <view wx:if="{{type == 2}}" class="form-entry">
  43. <view class="form-entry-title">渐晕强度</view>
  44. <slider bindchange="changeVignetteIntensity" value="{{vignetteIntensity}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  45. </view>
  46. <view wx:if="{{type == 2}}" class="form-entry">
  47. <view class="form-entry-title">渐晕平滑</view>
  48. <slider bindchange="changeVignetteSmoothness" value="{{vignetteSmoothness}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  49. </view>
  50. <view wx:if="{{type == 2}}" class="form-entry">
  51. <view class="form-entry-title">渐晕圆度</view>
  52. <slider bindchange="changeVignetteRoundness" value="{{vignetteRoundness}}" min="{{0}}" max="{{1}}" step="{{0.1}}"></slider>
  53. </view>
  54. <view wx:if="{{type == 1}}" class="form-entry">
  55. <view class="form-entry-title">泛光半径</view>
  56. <slider bindchange="changeBloomRadius" value="{{bloomRadius}}"></slider>
  57. </view>
  58. <view wx:if="{{type == 1}}" class="form-entry">
  59. <view class="form-entry-title">泛光强度</view>
  60. <slider bindchange="changeBloomIntensity" max="5" value="2" step="0.1" value="{{bloomIntensity}}"></slider>
  61. </view>
  62. <view wx:if="{{type == 1}}" class="form-entry">
  63. <view class="form-entry-title">泛光阈值</view>
  64. <slider bindchange="changeBloomThreshold" max="2" value="0.5" step="0.1" value="{{bloomThreshold}}"></slider>
  65. </view>
  66. <view wx:if="{{type == 3}}" class="form-entry">
  67. <view class="form-entry-title">开启FXAA</view>
  68. <switch checked="{{fxaaEnabled}}" bindchange="switchFXAA"/>
  69. </view>
  70. </xr-demo-viewer>