<template>
    <div class="shader" ref="container">
        <!-- <a
            href="javascript:;"
            class="weui-btn weui-btn_default select-btn"
            @click="chooseScene"
        >
            切换效果
        </a> -->
    </div>
</template>

<script>
import * as THREE from "three";
import * as Stats from "stats.js";
import cloud_vertex from "@/assets/shader/cloud_vertex.glsl";
import cloud_frag from "@/assets/shader/cloud_frag.glsl";
import cloud2_frag from "@/assets/shader/cloud2_frag.glsl";
import aurora_frag from "@/assets/shader/aurora_frag.glsl";
import star_frag from "@/assets/shader/star_frag.glsl";
import rain_frag from "@/assets/shader/rain_frag.glsl";

export default {
    name: "shader",
    props: {
        msg: String,
    },
    data() {
        return {
            nowSceneGlsl: 0,
            container: null,
            camera: null,
            scene: null,
            renderer: null,
            imouse: new THREE.Vector2(),
            uniforms: {
                resolution: {
                    value: new THREE.Vector2(
                        window.innerWidth,
                        window.innerHeight
                    ),
                },
                iDate: {
                    type: "v4",
                    value:
                        // new THREE.Vector4(2021, 3, 3, 17),
                        new THREE.Vector4(
                            new Date().getFullYear(),
                            new Date().getMonth(),
                            new Date().getDate(),
                            new Date().getHours()
                        ),
                },
                iTime: {
                    type: "f",
                    value: 1.0,
                },
                iResolution: {
                    type: "v2",
                    value: new THREE.Vector2(),
                },
                iMouse: {
                    type: "v2",
                    value: new THREE.Vector2(),
                },
            },
            glsls: [cloud_frag, cloud2_frag, aurora_frag, star_frag, rain_frag],
        };
    },
    created() {},
    mounted() {
        this.initStage();
    },
    methods: {
        chooseScene() {
            // 单列picker
            this.$weui.picker(
                [
                    {
                        label: "云",
                        value: 0,
                    },
                    {
                        label: "云2",
                        value: 1,
                    },
                    {
                        label: "极光",
                        value: 2,
                    },
                    {
                        label: "星星",
                        value: 3,
                    },
                    {
                        label: "雨",
                        value: 4,
                    },
                ],
                {
                    defaultValue: [0],
                    onChange: (result) => {
                        if (this.nowSceneGlsl == result[0].value) {
                            return false;
                        }
                        console.log(result[0]);
                        this.updateMaterial(result[0].value);
                        this.nowSceneGlsl = result[0].value;
                    },
                    onConfirm: function (result) {
                        // console.log(result);
                    },
                    id: "scenePicker",
                    title: "场景选择",
                    desc: "请选择一个场景",
                }
            );
        },
        initStage() {
            //基础参数
            this.container = this.$refs.container;
            this.camera = new THREE.Camera();
            this.camera.position.z = 1;
            this.scene = new THREE.Scene();

            // 创建 mesh
            var material = new THREE.ShaderMaterial({
                uniforms: this.uniforms,
                vertexShader: cloud_vertex,
                fragmentShader: this.glsls[4], //star_frag, //aurora_frag, //cloud_frag,
            });
            var geometry = new THREE.PlaneBufferGeometry(2, 2);
            this.mesh = new THREE.Mesh(geometry, material);
            this.scene.add(this.mesh);

            // 设置 render
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setPixelRatio(
                window.deviceInfo.device == "PC" ? 1 : 1
            );
            this.container.appendChild(this.renderer.domElement);
            // 设置 stats
            // this.stats = new Stats();
            // this.container.appendChild(this.stats.domElement);

            this.animate();

            this.onWindowResize();
            window.addEventListener("resize", this.onWindowResize, false);

            // 鼠标兼容shadertoy imouse
            this.container.addEventListener("touchmove", (evt) => {
                console.log(evt);
                this.uniforms.iMouse.x = evt["touches"][0].clientX;
                this.uniforms.iMouse.y = evt["touches"][0].clientY;
            });
        },
        onWindowResize(event) {
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.uniforms.iResolution.value.x = this.renderer.domElement.width;
            this.uniforms.iResolution.value.y = this.renderer.domElement.height;
        },
        updateMaterial(glslIndex) {
            this.mesh.material = new THREE.ShaderMaterial({
                uniforms: this.uniforms,
                vertexShader: cloud_vertex,
                fragmentShader: this.glsls[glslIndex], //star_frag, //aurora_frag, //cloud_frag,
            });
            // this.mesh.update();
        },
        animate() {
            requestAnimationFrame(this.animate);
            this.render();
        },
        render() {
            // this.stats.update();
            this.uniforms.iTime.value += 0.02;
            this.renderer.render(this.scene, this.camera);
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.shader {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 0;
    .select-btn {
        // background-color: #fff;
        .paCenterBottom(2%,50%,auto,10);
    }
}
</style>
