SSR原理测试

我想_iwant

于 2023-05-31 16:52:37 发布

阅读量144

点赞数

分类专栏： Threejs 文章标签： javascript 着色器

本文链接：https://blog.csdn.net/qq_20535249/article/details/130972651

版权

本文深入探讨SSR（Server-Side Rendering）的工作原理，讲解如何利用JavaScript在服务器端进行页面渲染，同时触及到着色器在SSR过程中的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>SSPR</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
   
				background-color: #ccc;
				color: #000;
			}

			a {
   
				color: #f00;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
   
				"imports": {
   
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="x-shader/x-vertex" id="vertexshader">

			varying vec2 vUv;

			void main() {
   

				vUv = uv;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D tDiffuse;
			uniform sampler2D tDepth;

//			uniform vec3 cameraPosition;//相机位置
			uniform mat4 viewMat4;//场景相机视图
			uniform mat4 viewProjMat4;//场景相机视图投影
			uniform mat4 projInvertMat4;//场景相机逆矩阵

			uniform float near;
			uniform float far;

			varying vec2 vUv;


			//读取深度
			float readDepth( sampler2D depthSampler, vec2 coord ) {
   
				vec4 pixel = texture2D(depthSampler, coord);
				return pixel.r;
			}

			//计算世界坐标
			vec3 computeWorldPos(vec2 uv){
   
				float depth = readDepth(tDepth, uv);//场景深度值

				vec4 pos;
				pos.w = 1.0;
				pos.z = depth * 2.0 - 1.0;
				pos.x = uv.x * 2.0 - 1.0;
				pos.y = uv.y * 2.0 - 1.0;

				vec4 worldPos = projInvertMat4 * pos;
				return worldPos .xyz/worldPos .w;
			}

			//获取对称世界坐标
			vec3 getReflectPos(vec3 position){
   
				return vec3(position.x, -position.y, position.z);
			}

			//根据世界坐标获取在当前屏幕UV
			vec2 getWorldPositionUV(vec3 worldPosition){
   
				vec4 glPosition = viewProjMat4 * vec4( worldPosition, 1.0 );
				vec3 ndc =  glPosition.xyz / glPosition.w;
				float u = (ndc.x + 1.0) / 2.0;
				float v = (ndc.y + 1.0) / 2.0;

				return vec2(u, v);
			}

			//viewZ转深度
			float viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) {
   
				return ( ( near + viewZ ) * far ) / (