1、修复了一些小的问题

2、增加了 "vite-plugin-glsl": "0.2.2" 版本,优化glsl 的展示
This commit is contained in:
hawk86104 2024-03-07 10:30:18 +08:00
parent 037c45935c
commit 4a5286a367
12 changed files with 116 additions and 34 deletions

View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2023-10-16 10:53:09 * @Date: 2023-10-16 10:53:09
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-05 18:51:52 * @LastEditTime: 2024-03-07 10:07:04
*/ */
module.exports = { module.exports = {
extends: ['@webank/eslint-config-webank/vue.js'], extends: ['@webank/eslint-config-webank/vue.js'],
@ -36,11 +36,11 @@ module.exports = {
// "semi": "off", // "semi": "off",
// "init-declarations": "off", // "init-declarations": "off",
// "space-unary-ops": "off", // "space-unary-ops": "off",
// 'import/no-unresolved': [ 'import/no-unresolved': [
// 2, 2,
// { {
// ignore: ['^@/', 'PLS'], // 设置的路径别名 ignore: ['^@/', 'PLS'], // 设置的路径别名
// }, },
// ], ],
}, },
}; };

12
.fes.js
View File

@ -4,14 +4,14 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2023-10-16 10:53:09 * @Date: 2023-10-16 10:53:09
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2024-01-04 10:35:21 * @LastEditTime: 2024-03-07 10:19:54
*/ */
// import { resolve } from 'path'; // import { resolve } from 'path';
import { join } from 'path'; import { join } from 'path';
import { defineBuildConfig, someApi, plugin, ApplyPluginsType } from '@fesjs/fes'; import { defineBuildConfig } from '@fesjs/fes'
import { templateCompilerOptions } from '@tresjs/core'; import { templateCompilerOptions } from '@tresjs/core'
import UnoCSS from 'unocss/vite'; import UnoCSS from 'unocss/vite'
// import glsl from 'vite-plugin-glsl'; import glsl from 'vite-plugin-glsl'
export default defineBuildConfig({ export default defineBuildConfig({
title: 'TvT.js', title: 'TvT.js',
@ -41,7 +41,7 @@ export default defineBuildConfig({
UnoCSS({ UnoCSS({
/* options */ /* options */
}), }),
// glsl(), glsl()
], ],
server: { server: {
host: "0.0.0.0" host: "0.0.0.0"

View File

@ -1,3 +1,11 @@
<!--
* @Description:
* @Version: 1.668
* @Autor: 地虎降天龙
* @Date: 2024-03-07 09:46:12
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-07 10:02:16
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">

View File

@ -21,7 +21,8 @@
"@types/offscreencanvas": "^2019.7.3", "@types/offscreencanvas": "^2019.7.3",
"@types/three": "0.161.1", "@types/three": "0.161.1",
"@webank/eslint-config-webank": "1.3.1", "@webank/eslint-config-webank": "1.3.1",
"cross-env": "^7.0.3" "cross-env": "^7.0.3",
"vite-plugin-glsl": "0.2.2"
}, },
"dependencies": { "dependencies": {
"3d-tiles-renderer": "^0.3.25", "3d-tiles-renderer": "^0.3.25",

73
src/common/vite-plugin-glsl-ext.d.ts vendored Normal file
View File

@ -0,0 +1,73 @@
/*
* @Description:
* @Version: 1.668
* @Autor:
* @Date: 2024-03-07 10:27:42
* @LastEditors:
* @LastEditTime: 2024-03-07 10:27:53
*/
/**
* @const
* @readonly
* @kind module
* @description Generic shaders
*/
declare module '*.glsl' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description WebGPU shaders
*/
declare module '*.wgsl' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Vertex shaders
*/
declare module '*.vert' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Fragment shaders
*/
declare module '*.frag' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Vertex shaders
*/
declare module '*.vs' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Fragment shaders
*/
declare module '*.fs' {
const shader: string;
export default shader;
}

View File

@ -4,8 +4,8 @@ import { useRenderLoop } from '@tresjs/core'
// import { CustomShaderMaterial } from '@tresjs/cientos' // import { CustomShaderMaterial } from '@tresjs/cientos'
import CustomShaderMaterial from 'three-custom-shader-material/vanilla' import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
import { ref, watchEffect, watch } from 'vue'; import { ref, watchEffect, watch } from 'vue';
import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert?raw' import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert'
import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag?raw' import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag'
import * as THREE from 'three' import * as THREE from 'three'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
model: any model: any
@ -34,7 +34,7 @@ const setColorMaterial = (type: any, param: string) => {
} else if (type === 'land') { } else if (type === 'land') {
// mesh // mesh
materials = Array.isArray(LANDMASS.material) ? LANDMASS.material : [LANDMASS.material] materials = Array.isArray(LANDMASS.material) ? LANDMASS.material : [LANDMASS.material]
materials.forEach((material) => { materials.forEach((material:any) => {
material[param].setStyle(props.landColor); material[param].setStyle(props.landColor);
material.side = THREE.DoubleSide // material.side = THREE.DoubleSide //
}) })
@ -77,7 +77,6 @@ const setEffectMaterial = () => {
value: props.gradient value: props.gradient
} }
}, },
depthWrite: true, depthWrite: true,
depthTest: true, depthTest: true,
transparent: true, // transparent: true, //

View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2023-12-22 08:09:35 * @Date: 2023-12-22 08:09:35
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2023-12-25 11:31:18 * @LastEditTime: 2024-03-07 10:12:27
--> -->
<template> <template>
@ -12,7 +12,7 @@
<TresPerspectiveCamera :position="[-15, 15, -15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" /> <TresPerspectiveCamera :position="[-15, 15, -15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
<OrbitControls enableDamping /> <OrbitControls enableDamping />
<TresAmbientLight :intensity="10.0" /> <TresAmbientLight :intensity="10.0" />
<TresDirectionalLight :position="[0, 8, 0]" :intensity="10" v-light-helper color="#fff" /> <TresDirectionalLight v-light-helper :position="[0, 8, 0]" :intensity="10" color="#fff" />
<Box :args="[1, 1, 1]" color="orange" :position="[3, 1, 0]" /> <Box :args="[1, 1, 1]" color="orange" :position="[3, 1, 0]" />
<TresMesh :position="[0, 2, 4]"> <TresMesh :position="[0, 2, 4]">
<TresBoxGeometry :args="[1, 1, 1]" /> <TresBoxGeometry :args="[1, 1, 1]" />
@ -27,10 +27,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Box, vLightHelper } from '@tresjs/cientos' import { OrbitControls, Box, vLightHelper } from '@tresjs/cientos'
import reflectorDiffuse from '../components/reflectorDiffuse.vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import { Pane } from 'tweakpane' import { Pane } from 'tweakpane'
import reflectorDiffuse from '../components/reflectorDiffuse.vue'
const configState = reactive({ const configState = reactive({
mirror: 0.9, // mirror: 0.9, //

View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2024-01-25 10:20:13 * @Date: 2024-01-25 10:20:13
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2024-01-26 14:39:17 * @LastEditTime: 2024-03-07 10:07:53
--> -->
<template> <template>
@ -12,8 +12,7 @@
<TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" /> <TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
<OrbitControls enableDamping /> <OrbitControls enableDamping />
<TresAmbientLight :intensity="10.0" /> <TresAmbientLight :intensity="10.0" />
<TresDirectionalLight ref="TDirectionalLight" :position="[0, 10, 10]" :intensity="1" v-light-helper color="#ffffff" <TresDirectionalLight ref="TDirectionalLight" v-light-helper :position="[0, 10, 10]" :intensity="1" color="#ffffff" cast-shadow />
cast-shadow />
<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" cast-shadow /> <Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" cast-shadow />
<TresMesh :position="[0, 2, -4]" cast-shadow> <TresMesh :position="[0, 2, -4]" cast-shadow>
<TresBoxGeometry :args="[1, 1, 1]" /> <TresBoxGeometry :args="[1, 1, 1]" />
@ -35,10 +34,10 @@
import * as THREE from "three" import * as THREE from "three"
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { OrbitControls, vLightHelper, Box } from '@tresjs/cientos' import { OrbitControls, vLightHelper, Box } from '@tresjs/cientos'
import whiteFloorMesh from '../components/whiteFloorMesh.vue'
import skyBox from 'PLS/skyBox/components/skyBoxAmesh.vue' import skyBox from 'PLS/skyBox/components/skyBoxAmesh.vue'
import { shallowRef, watchEffect, reactive } from 'vue' import { shallowRef, watchEffect, reactive } from 'vue'
import { Pane } from 'tweakpane' import { Pane } from 'tweakpane'
import whiteFloorMesh from '../components/whiteFloorMesh.vue'
const tcConfig = { const tcConfig = {
clearColor: "#201919", clearColor: "#201919",

View File

@ -1,12 +1,12 @@
<template > <template>
<canvas id="canvaswebgl" style="height: 500px; width: 500px"></canvas> <canvas id="canvaswebgl" style="height: 500px; width: 500px"></canvas>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { OrbitControls } from '@tresjs/cientos';
import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js';
import * as glMatrix from 'gl-matrix'; import * as glMatrix from 'gl-matrix';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
// eslint-disable-next-line import/extensions
import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js'
const vertexString = ` const vertexString = `
attribute vec4 a_position; attribute vec4 a_position;
@ -26,10 +26,10 @@ void main(){
} }
`; `;
const main = function () { const main = function () {
var canvas = document.querySelector('#canvaswebgl'); const canvas = document.querySelector('#canvaswebgl') as HTMLCanvasElement;
var gl = canvas.getContext('webgl'); const gl = canvas?.getContext('webgl');
if (!gl) { if (!gl) {
return; return
} }
// shader // shader
var program = initShaders(gl, vertexString, fragmentString); var program = initShaders(gl, vertexString, fragmentString);

View File

@ -3,7 +3,9 @@
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "esnext", "target": "esnext",
"types": [], "types": [
"./common/vite-plugin-glsl/vite-plugin-glsl-ext.d.ts"
],
"lib": [ "lib": [
"esnext", "esnext",
"dom" "dom"