当前位置: 首页 > news >正文

ThreeJS-3D教学十二:ShaderMaterial

一、首先 Shader 是做什么的
Shader 可以自定义每个顶点、每个片元/像素如何显示,而控制顶点和片元显示是通过设置 vertexShader 顶点着色器和 fragmentShader 片元着色器,这两个着色器用在 ShaderMaterial 和 RawShaderMaterial 材质上。
我们先看一个例子:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><title>three.js webgl - raw shader</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;attribute vec3 position;void main()	{gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
</script><script id="fragmentShader" type="x-shader/x-fragment">void main()	{gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}</script>
<script type="importmap">{"imports": {"three": "../three-155/build/three.module.js","three/addons/": "../three-155/examples/jsm/"}}
</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let container, stats, controls;let camera, scene, renderer;init();animate();initObject();function initObject() {// geometry// 第一个是生成几个三角形 const vertexCount = 2 * 3;const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];for ( let i = 0; i < vertexCount; i ++ ) {// adding x,y,zpositions.push( Math.random() - 0.5 );positions.push( Math.random() - 0.5 );positions.push( Math.random() - 0.5 );// adding r,g,b,acolors.push( Math.random() * 255 );colors.push( Math.random() * 255 );colors.push( Math.random() * 255 );colors.push( Math.random() * 255 );}const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shadergeometry.setAttribute( 'position', positionAttribute );geometry.setAttribute( 'color', colorAttribute );// materialconst material = new THREE.RawShaderMaterial({uniforms: {time: { value: 1.0 }},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.DoubleSide,transparent: true});const mesh = new THREE.Mesh( geometry, material );scene.add( mesh );}function init() {container = document.getElementById( 'container' );camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );camera.position.z = 2;scene = new THREE.Scene();scene.background = new THREE.Color( 0x101010 );renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );controls = new OrbitControls( camera, renderer.domElement );stats = new Stats();container.appendChild( stats.dom );window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();controls.update();stats.update();}function render() {const time = performance.now();const object = scene.children[0];if (object) {// object.rotation.y = time * 0.0005;object.material.uniforms.time.value = time * 0.005;}renderer.render( scene, camera );}
</script>
</body>
</html>

以上代码 顶点着色器 我们用的是固定写法计算顶点的位置

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
或者也可以这样:
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );

而片元着色器我们设置了一个白色
我相信大家会对 scropt 中 x-shader/x-vertex、x-shader/x-fragment 很陌生,没关系咱们学习 Shader 其实大部分就是学这里面怎么写:
它是一种类似C语言的 GLSL 语言——即 OpenGL Shading Language——,
JavaScript、C 等语言通常在 CPU 上执行,而着色器语言通常在 GPU 上执行,由 GPU 分别对每个顶点、每个片元独立执行

shader 程序可以单独写在诸如 vertex.glsl、fragment.glsl 的文件里再导入使用,也可以和示例一样写在script中,或者在 JavaScript 里用字符串格式表示(后面会介绍)

在顶点着色器里需要设置 gl_Position顶点位置,在片元着色器里需要设置 gl_FragColor 片元/像素颜色,两者都在没有返回值的 void main() {} 主函数里设置,并且 main 函数会被自动执行

着色器语言三种变量 attribute、uniform 和 varying

  • 简单总结
    顶点着色器渲染定位顶点位置
    片段着色器为该几何体的每个可见片元(像素)进行着色
    片段着色器在顶点着色器之后执行
    在每个顶点之间会有变化的数据(如顶点的位置)称为attribute,只能在顶点着色器中使用
    顶点之间不变的数据(如网格位置或颜色)称为uniform,可以在顶点着色器和片段着色器中使用
    从顶点着色器发送到片元着色器中的插值计算数据被称为varying

看了上面的内容,我们再来看一个案例,提前说下 在这里我无意将所有 GLSL 语言的方法一一列出,我相信大家也不愿意看,毕竟网上一大堆类似文章,官网上也能看,我只是通过案例,把一些常用的知识点给到大家,能让各位对 编写Shader有个初步的认知:

let vertexShader = `precision mediump float;precision mediump int;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;attribute vec3 position;attribute vec4 color;varying vec3 vPosition;varying vec4 vColor;void main()	{vPosition = position;vColor = color;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
`;
let fragmentShader = `precision mediump float;precision mediump int;uniform float time;varying vec3 vPosition;varying vec4 vColor;void main()	{vec4 color = vec4( vColor );color.g += sin( vPosition.x * 10.0 + time ) * 0.5;gl_FragColor = color;}
`;

上面有几点知识点,先从简单的来,
1、通过 varying 可以将vPosition、vColor 从 vertexShader 到 fragmentShader
2、上面的写法是 shader 程序刚才提到的 字符串格式写法
3、precision 一个新的知识点 - 着色器运算精度设置
通过设置着色器数值的精度可以更好的配置资源,可以根据需要,在不太影响渲染效果前提下,可以尽量降低运算精度。
lowp、mediump和highp关键字 分别对应 低、中、高三个精度

1)通过precision关键字可以批量声明一些变量精度。
比如顶点着色器代码设置precision highp float;,表示顶点着色器中所有浮点数精度为高精度。

2)比如片元着色器代码设置precision lowp int;,表示片元着色器中所有整型数精度为低精度。

3)顶点和片元着色器不同类型数据默认精度
顶点着色器默认精度

数据类型默认精度
int高精度hight
float高度hight
sampler2D低精度lowp
samplerCube低精度lowp

片元着色器默认精度

数据类型默认精度
int中精度mediump
float无默认值,如果片元着色器用到浮点数,注意一定手动设置
sampler2D低精度lowp
samplerCube低精度lowp

4、我们发现有申明 modelViewMatrix、projectionMatrix、position、color变量,这是因为我们使用 RawShaderMaterial材质,这个方法没有默认的内置变量声明,与之对应的我们可以用 ShaderMaterial 材质,此时就可以这样写:

let vertexShader = `precision mediump float;precision mediump int;varying vec3 vPosition;varying vec4 vColor;void main()	{vPosition = position;vColor = color;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
`;

更多的 内置变量请看这里
通过以上案例我们算是简单的了解了 Shader,发现 Shader其实就是改变 顶点位置 和 片元/像素颜色

二、图形构成的基础 三角形
我们将 geometry 换为一个球体来认识一下图形的基础构成

const geometry = new THREE.SphereGeometry( 0.5, 16, 8 );
const material = new THREE.RawShaderMaterial({uniforms: {time: { value: 1.0 }},vertexShader: document.getElementById( 'vertexShader1' ).textContent,fragmentShader: document.getElementById( 'fragmentShader1' ).textContent,side: THREE.DoubleSide,transparent: false,wireframe: true  // 将几何体渲染为线框,默认值为false(即渲染为平面多边形)。});

在这里插入图片描述
通过这个球体 可以很好的理解 图形的构成,其实就是一个个的三角形,三角形越是多,图形效果越好 当然对电脑性能要求越高,

const geometry = new THREE.SphereGeometry( 0.5, 128, 64);

在这里插入图片描述
可以看到 这个球体就很完美了,通过这个案例也能更好的帮大家理解
顶点着色器渲染顶点位置的顶点 是哪些点、从哪来的点
片段着色器为该几何体的每个可见片元(像素)进行着色

相关文章:

ThreeJS-3D教学十二:ShaderMaterial

一、首先 Shader 是做什么的 Shader 可以自定义每个顶点、每个片元/像素如何显示&#xff0c;而控制顶点和片元显示是通过设置 vertexShader 顶点着色器和 fragmentShader 片元着色器&#xff0c;这两个着色器用在 ShaderMaterial 和 RawShaderMaterial 材质上。 我们先看一个例…...

计算机网络面试TCP篇之TCP三次握手与四次挥手

TCP 三次握手与四次挥手面试题 任 TCP 虐我千百遍&#xff0c;我仍待 TCP 如初恋。 巨巨巨巨长的提纲&#xff0c;发车&#xff01;发车&#xff01; PS&#xff1a;本次文章不涉及 TCP 流量控制、拥塞控制、可靠性传输等方面知识&#xff0c;这些知识在这篇&#xff1a; TCP …...

Python-数据分析组合可视化实例图【附完整源码】

数据分析组合可视化实例图 开篇&#xff1a;应女朋友的要求&#xff0c;于是写下了这篇详细的数据可视化代码及完整注释 一&#xff1a;柱状图、折线图横向组合网格布局 本段代码使用了pyecharts库来创建一个包含多个图表&#xff08;柱状图、折线图&#xff09;和网格布局的…...

【JavaEE】Spring Web MVC详解

一.基本概念. 1.什么是Spring Web MVC? 官方链接: https://docs.spring.io/spring-framework/reference/web/webmvc.html Spring Web MVC is the original web framework built on the Servlet API and has been included in the Spring Framework from the very beginning…...

docker安装rocketMq5x以上的版本

1.背景 安装RocketMQ 5.x以上的版本主要是因为新版本引入了许多性能优化、新功能以及对已有特性的增强&#xff0c;这些改进可以帮助提升消息队列系统的稳定性和效率。 1.性能提升&#xff1a;RocketMQ 5.x版本通常包括了对消息处理速度、吞吐量和延迟的优化&#xff0c;使得系…...

【Spring】DAO 和 Repository 的区别

DAO 和 Repository 的区别 1.概述2.DAO 模式2.1 User2.2 UserDao2.3 UserDaoImpl 3.Repository 模式3.1 UserRepository3.2 UserRepositoryImpl 4.具有多个 DAO 的 Repository 模式4.1 Tweet4.2 TweetDao 和 TweetDaoImpl4.3 增强 User 域4.4 UserRepositoryImpl 5.比较两种模式…...

高阶面试-秒杀系统的设计

场景 特价商品如茅台&#xff0c;在8月1日22点10分0秒开始秒杀 平台用户量&#xff1a;几千万&#xff0c;预计几十万用户感兴趣 需求 临时性的活动&#xff0c;不要太大技术改动 原则 商品不能超卖下单成功的订单不能丢失服务器和数据库不能崩溃尽量不让机器人抢走商品 …...

四十五、 证券基金业数据出境有无特别规范需要注意?

证券基金业数据合规除应遵守本《实务问答》前述的各项通用规定外&#xff0c;还应注意中国证券监督管理委员会等其他机构发布的相关规范。其中&#xff0c;与数据出境相关的主要包括《证券期货业数据分类分级指引》&#xff08;JR/T 0158—2018&#xff0c;2018年 9月 27日实施…...

02.Linux下安装FFmpeg

目录 一、下载FFmpeg的编译源码 二、编译源码 三、ffmpeg工具结构解析 1、bin目录 2、include库 3、lib库 四、注意事项 五、可能出现的一些问题 1、某些工具未安装/版本过久 2、缺少pkg-config工具 3、缺少ffmplay FFmpeg 是一个开源的跨平台音视频处理工具集&…...

华为RH2288H V2服务器,远程端口安装Linux操作系统

1、管理口 每台服务器的管理口不一样的&#xff0c;假如我的管理IP地址为&#xff1a;192.168.111.201 使用网线&#xff0c;将管理口和自己电脑连接起来&#xff0c;自己ip地址设置成和管理ip同一网段。 使用 ie 浏览器&#xff0c;如果是Edge&#xff0c;必须在Internet Exp…...

JS在线加密简述

JS在线加密&#xff0c;是指&#xff1a;在线进行JS代码混淆加密。通过混淆、压缩、加密等手段&#xff0c;使得JS源代码难以阅读和理解。从而可以有效防止代码被盗用或抄袭&#xff0c;保护开发者的知识产权和劳动成果。常用的JS在线加密网站有&#xff1a;JShaman、JS-Obfusc…...

理想汽车提出3DRealCar:首个大规模3D真实汽车数据集

理想提出3DRealCar&#xff0c;这是第一个大规模 3D 实车数据集&#xff0c;包含 2500 辆在真实场景中拍摄的汽车。我们希望 3DRealCar 可以成为促进汽车相关任务的宝贵资源。 理想汽车提出3DRealCar&#xff1a;首个大规模3D真实汽车数据集! 我们精心策划的高质量3DRealCar数…...

HTML5文旅文化旅游网站模板源码

文章目录 1.设计来源文旅宣传1.1 登录界面演示1.2 注册界面演示1.3 首页界面演示1.4 文旅之行界面演示1.5 文旅之行文章内容界面演示1.6 关于我们界面演示1.7 文旅博客界面演示1.8 文旅博客文章内容界面演示1.9 联系我们界面演示 2.效果和源码2.1 动态效果2.2 源代码2.3 源码目…...

山东大学多核并行2024年回忆版

2024.6.13回忆版 矩阵向量乘不可整除代码 集合通信与点对点通信的区别 块划分、循环划分、循环块划分&#xff08;14个向量&#xff0c;4个进程&#xff09; 按行访问还是按列访问快 SISD系统问题 循环依赖问题 问题&#xff1a;为什么不能对这个循环并行化&#xff0…...

CentOS 7 上搭建 JavaEE 环境

CentOS 7 上搭建 JavaEE 环境 安装 Java 环境 1&#xff09;检查系统中是否已安装 Java java -version如果未安装&#xff0c;将返回提示信息。 2&#xff09;安装 Java 8 sudo yum install java-1.8.0-openjdk3&#xff09;配置 Java 环境变量&#xff0c;编辑 /etc/prof…...

库与表管理的终极指南

数据库的库和表的管理 库的管理1.库的创建2.数据库的查看和使用3.数据库的修改4.数据库的删除 表的管理1.表的创建2.表的修改3.表的删除4.查看一个表 阅读指南&#xff1a; 本文章是数据库教程系列的一部分&#xff0c;专注于数据库的库和表管理。读者可以根据兴趣选择阅读相关…...

等级保护测评在测评中Linux系统怎么改

在等级保护测评中&#xff0c;针对Linux系统的整改主要是为了提高其安全性&#xff0c;使之符合等级保护的基本要求。 以下是一些常见的整改步骤和建议&#xff1a; 1. 身份鉴别&#xff1a; • 强化密码策略&#xff0c;例如设置复杂的密码规则、密码长度、密码复杂度、密码…...

Python项目开发实战:微信跳一跳辅助工具,案例教程编程实例课程详解

一、项目背景与意义 微信跳一跳是微信推出的一款小游戏,玩家需要控制一个小人从一个平台跳到另一个平台上,每成功跳过一个平台,分数就会增加。然而,随着游戏难度的增加,玩家需要更精准的控制和更快的反应速度,这往往让许多玩家感到力不从心。因此,开发一款微信跳一跳的辅…...

STM32 SWD烧写

最小电路 stm32f103x 内部已经集成了振荡电路&#xff0c;可以省略&#xff1b;rst引脚电路&#xff0c;可以省略&#xff0c;boot0,boot1不需要设置 正常烧录 -------------------------------------------------------------------STM32CubeProgrammer v2.9.0 …...

数据库系统概论(第5版教材)

第一章 绪论 1、数据(Data)是描述事物的符号记录&#xff1b; 2、数据库系统的构成&#xff1a;数据库 、数据库管理系统&#xff08;及其开发工具&#xff09; 、应用程序和数据库管理员&#xff1b; 3、数据库是长期存储在计算机内、有组织、可共享的大量数据的集合&…...

算法力扣刷题 二十六【459.重复的子字符串】

前言 字符串篇&#xff0c;继续。 记录 二十六【459.重复的子字符串】 一、题目阅读 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s "abab" 输出: true 解释: 可由子串 "ab" 重复两次构成。示例…...

【Linux】虚拟机安装openEuler 24.03 X86_64 教程

目录 一、概述 1.1 openEuler 覆盖全场景的创新平台 1.2 系统框架 1.3 平台框架 二、安装详细步骤 一、概述 1.1 openEuler 覆盖全场景的创新平台 openEuler 已支持 x86、Arm、SW64、RISC-V、LoongArch 多处理器架构&#xff0c;逐步扩展 PowerPC 等更多芯片架构支持&…...

分布式事务:理论与实践

分布式事务&#xff1a;理论与实践 在现代分布式系统中&#xff0c;分布式事务是一种确保跨多个独立系统的一致性和完整性的方法。本文将介绍分布式事务的基本概念、实现方式、在Java中的具体实现以及在实际应用中的案例。 分布式事务的基本概念 分布式事务涉及多个独立的数…...

5、双足机器人mpc动力学模型

为计算机器人的当前实际状态x,需要建立双足质心动力学模型。 速度模型由控制输入变量推导速度公式: x向速度νx :当前机器人x方向的前进速度,初始值由速度传感器实时测量得到。y向速度νy :机器人y方向的平移速度。z向速度νz :垂直方向的速度,对于双足机器人行走时为0:…...

虚拟机配置与windows之间文件夹共享samba服务:

虚拟机配置与windows之间文件夹共享samba服务: #输入安装命令&#xff1a; 第一步: 下载samba cd /etc/ sudo apt-get install samba第二步: 配置用户 sudo smbpasswd -a 虚拟机用户名第三步: 进入配置文件配置共享文件 sudo vim /etc/samba/smb.conf末尾输入以下内容: [s…...

探索音频创作的无限可能——Studio One 5 软件深度解析

Studio One 5 是一款功能强大且备受赞誉的音频制作软件&#xff0c;无论是专业音乐制作人还是业余爱好者&#xff0c;都能在其中找到满足自己需求的强大功能。 对于 Mac 和 Windows 用户来说&#xff0c;Studio One 5 提供了一个直观且友好的操作界面。其简洁明了的布局让用户…...

CSS Flex弹性布局

一、传统布局与flex布局 1、传统布局 2、flex布局 二、flex布局原理 1、布局原理 2、flex布局体验 三、flex布局父项常见属性 1、常见的父项属性 2、flex-direction设置主轴的方向 3、justify-content 设置主轴上的子元素排列方式 4、flex-wrap 设置子元素是否换行 …...

第十六章:基于开源大模型使用huggingface在deepspeed与accelerator下继承源码权重保存而实现resume与infer

文章目录 前言一、huggingface的_save_checkpoint函数不同阶段保存内容介绍1、_save_checkpoint函数2、save_model函数3、_save函数4、save_pretrained函数5、resume说明二、模型训练Resume相关内容重载1、Resume的一次性权重载入(deepspeed_load_checkpoint)2、Resume的optimi…...

ZooKeeper 入门:初学者指南

在分布式系统领域&#xff0c;协调和同步至关重要。Apache ZooKeeper 是一种分布式协调服务&#xff0c;是帮助管理和同步分布式环境中服务的基本组件。本指南旨在深入分析 ZooKeeper、其架构及其在现代分布式系统中的作用。我们还将探索一个示例来展示其实际影响。 ZooKeeper…...

【数据结构(邓俊辉)学习笔记】二叉搜索树04——AVL树

文章目录 1.重平衡1.1 AVL BBST1.2 平衡因子1.3 适度平衡1.4 接口1.5 失衡 复衡 2. 插入2.1 单旋2.2 双旋2.3 实现 3. 删除3.1 单旋3.2 双旋3.3 实现 4. &#xff08;3 4&#xff09;-重构4.1 "34"重构4.2 "34"实现4.3 rotateAt4.4 综合评价 1.重平衡 1…...

SpringMVC基础详解

文章目录 一、SpringMVC简介1、什么是MVC2、MVC架构模式与三层模型的区别3、什么是SpringMVC 二、HelloWorld程序1、pom文件2、springmvc.xml3、配置web.xml文件4、html文件5、执行Controller 三、RequestMapping注解1、value属性1.1、基础使用1.2、Ant风格&#xff08;模糊匹配…...

SQL SERVER 设置端口

要在SQL Server中设置端口&#xff0c;可以通过SQL Server Configuration Manager来完成。以下是详细的步骤&#xff1a; 1. 打开SQL Server Configuration Manager 在Windows中&#xff0c;按 Win R 键打开运行窗口。输入 SQLServerManager<version>.msc 并按回车。例…...

华芯微特2024慕尼黑上海电子展预告

7月8日-7月10日&#xff0c;2024慕尼黑上海电子展在上海新国际博览中心举办。华芯微特展号:E4.4815&#xff0c;诚意邀请各位莅临参观。 公司介绍 华芯微特是一家由留美归国资深技术团队创立的中国芯片设计公司&#xff0c;是国家高新技术企业。2014年进军MCU产业&#xff0c;专…...

DETR End-to-End Object Detection with Transformers

End-to-End Object Detection with Transformers 论文链接&#xff1a;http://arxiv.org/abs/2005.12872 代码地址&#xff1a;https://github.com/facebookresearch/detr 一、摘要 提出了一种将目标检测视为直接集合预测问题的新方法。该方法简化了检测流程&#xff0c;有效…...

【后端面试题】【中间件】【NoSQL】ElasticSearch 节点角色、写入数据过程、Translog和索引与分片

中间件的常考方向&#xff1a; 中间件如何做到高可用和高性能的&#xff1f; 你在实践中怎么做的高可用和高性能的&#xff1f; Elasticsearch节点角色 Elasticsearch的节点可以分为很多种角色&#xff0c;并且一个节点可以扮演多种角色&#xff0c;下面列举几种主要的&…...

【TB作品】玩具电子琴,ATMEGA128单片机,Proteus仿真

题目 7 &#xff1a;玩具电子琴 基于单片机设计一能够发出中音八个音阶的音乐信号的电子琴&#xff0c;能够实现弹奏和音符显示功 能。 具有 8 个音阶按键&#xff0c;每按下一个按键时&#xff0c;所对应的 LED 点亮&#xff0c;音符进行显示。 具体要求如下&#xff1a; &…...

1974Springboot医院远程诊断管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot医院远程诊断管理系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库…...

SQL游标的应用场景及使用方法

SQL游标的应用场景及使用方法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨SQL中游标的应用场景及使用方法。游标在SQL中是一种重要的数据…...

LLama-Factory使用教程

本文是github项目llama-factory的使用教程 注意&#xff0c;最新的llama-factory的github中训练模型中&#xff0c;涉及到本文中的操作全部使用了.yaml配置。 新的.yaml的方式很简洁但不太直观&#xff0c;本质上是一样的。新的readme中的.yaml文件等于下文中的bash指令 PS: …...

Java面试题:讨论在Java Web应用中实现安全的认证和授权机制,如使用Spring Security

在Java Web应用中&#xff0c;实现安全的认证和授权是至关重要的&#xff0c;Spring Security是一个强大的框架&#xff0c;可以简化这项工作。以下是详细讨论如何在Java Web应用中使用Spring Security实现安全的认证和授权机制。 Spring Security简介 Spring Security是一个…...

如何在Vue3项目中使用Pinia进行状态管理

**第一步&#xff1a;安装Pinia依赖** 要在Vue3项目中使用Pinia进行状态管理&#xff0c;首先需要安装Pinia依赖。可以使用以下npm命令进行安装&#xff1a; bash npm install pinia 或者如果你使用的是yarn&#xff0c;可以使用以下命令&#xff1a; bash yarn add pinia *…...

【初阶数据结构】深入解析队列:探索底层逻辑

&#x1f525;引言 本篇将深入解析队列:探索底层逻辑&#xff0c;理解底层是如何实现并了解该接口实现的优缺点&#xff0c;以便于我们在编写程序灵活地使用该数据结构。 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#…...

Go 语言环境搭建

本篇文章为Go语言环境搭建及下载编译器后配置Git终端方法。 目录 安装GO语言SDK Window环境安装 下载 安装测试 安装编辑器 下载编译器 设置git终端方法 总结 安装GO语言SDK Window环境安装 网站 Go下载 - Go语言中文网 - Golang中文社区 还有 All releases - The…...

javascript v8编译器的使用记录

我的机器是MacOS Mx系列。 一、v8源码下载构建 1.1 下载并更新depot_tools git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git export PATH/path/to/depot_tools:$PATH 失败的话可能是网络问题&#xff0c;可以试一下是否能ping通&#xff0c;连…...

C语言--vs使用调试技巧

1.什么是bug? 1.产品说明书中规定要做的事情&#xff0c;而软件没有实现。 2.产品说明书中规定不要做的事情&#xff0c;而软件确实现了。 3.产品说明书中没有提到过的事情&#xff0c;而软件确实现了。 4.产品说明书中没有提到但是必须要做的事情&#xff0c;软件确没有实…...

Spring Boot中的国际化配置

Spring Boot中的国际化配置 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中实现国际化配置&#xff0c;使得应用能够轻松…...

WPF的IValueConverter用于校验和格式化TextBox的数字输入

在数据绑定&#xff08;Data Binding&#xff09;的上下文中&#xff0c;我们经常使用继承 IValueConverter 接口的类&#xff0c;用于在源值和目标值之间进行转换。该接口定义了两个方法&#xff1a;Convert 和 ConvertBack&#xff0c;这两个方法分别用于从源值到目标值的转换…...

SQL Server的守护神:Always On 高可用性详解

&#x1f6e1;️ SQL Server的守护神&#xff1a;Always On 高可用性详解 在企业级应用中&#xff0c;数据的可用性和业务连续性至关重要。SQL Server的Always On功能提供了一个高可用性解决方案&#xff0c;确保数据库服务的持续运行和快速故障恢复。本文将详细解释SQL Serve…...

Eureka入门

Eureka是一种服务发现工具&#xff0c;广泛应用于微服务架构中。它主要由Netflix开源&#xff0c;帮助服务在分布式系统中自动注册和发现。以下是Eureka的基本入门指南。 前提条件 在开始之前&#xff0c;确保你已经安装了以下软件&#xff1a; JDK 8或更高版本Maven或Gradl…...

高阶面试-netty部分

介绍下netty Netty 是一个基于 Java 的异步事件驱动的网络应用框架&#xff0c;提供了用于快速开发高性能、高可扩展性的协议服务器和客户端的工具 BIO、NIO、AIO 的区别是什么 BIO blocking io&#xff0c;同步阻塞IO&#xff0c;比较简单&#xff0c;为每个请求分配一个线…...

Linux学习笔记(一)

命令格式 command [-options] [parameter] command&#xff1a;命令名&#xff0c;相应功能的英文单词或单词的缩写 [-options]&#xff1a;选项&#xff0c;可用来对命令进行控制&#xff0c;也可以省略 parameter&#xff1a;传给命令的参数&#xff0c;可以是零个、一个或者…...

设计模式(四)责任链模式

一、责任链模式是什么 责任链模式&#xff08;Chain of Responsibility&#xff09;: 使多个对象都有机会处理同一请求&#xff0c;从而避免请求的发送者和接受者之间的耦合关系&#xff0c;每个对象都是一个处理节点&#xff0c;将这些对象连成一条链&#xff0c;并沿着这条链…...

分布式限流:Spring Cloud Gateway 限流

分布式限流&#xff1a;Spring Cloud Gateway 限流 在现代微服务架构中&#xff0c;流量控制是一个至关重要的部分。分布式限流作为一种有效的流量控制手段&#xff0c;能够帮助我们保护系统不被突发的流量冲垮。Spring Cloud Gateway支持多种限流方式。 什么是分布式限流 分…...

昇思25天学习打卡营第17天(+1)|Diffusion扩散模型

1. 学习内容复盘 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成功运行。如您下载本文档为Python文件&#xff0c;执行Python文件时&#xff0c;请确…...

李诞-2021.8脱口秀工作手册-4-真诚,演自己,分享价值观;语音象征主义;津津有味:把情境还原到舞台上;关键是还原,不是表演。不要为了表演而表演

7 表演的目的始终是让人相信 真诚是第一位的。脱口秀就是在演自己。就是通过表演&#xff0c;把你真实的价值观分享给观众。 有舞台经验的朋友都知道&#xff0c;在舞台上&#xff0c;你是个什么样的人&#xff0c;其实是藏不住的。真诚面对&#xff0c;是逻辑的必然。这也是…...

带安全启动—Ubuntu系统—手动安装Nvidia驱动

教程1&#xff1a;在启用安全启动的 Fedora 中安装英伟达驱动 教程2&#xff1a;UEFI安全启动模式下安装Ubuntu的NVIDIA显卡驱动 1. 搜索合适的驱动 Nvidia驱动官网 选择这个 驱动(.run)链接 2. 安装必要的软件依赖 CUDA底层用C写的&#xff0c;因此导入编译器 sudo apt i…...

上海市眼病防治中心发布新书,用故事告诉孩子爱眼护眼

6月3日,在第29个全国爱眼日来临前夕,一场儿童眼健康知识科普盛宴在上海市杨浦区YOUNG剧场拉开帷幕,《眼睛逃跑计划》新书发布会暨舞台剧杨浦区专场演出举行,标志着上海首个以“儿童视力保护”为主题的科普舞台剧成功转化为纸质绘本。发布的新书。上海市眼病防治中心 供图《…...

[Leetcode LCR 106.判断二分图]

LCR 106. 判断二分图 - 力扣&#xff08;LeetCode&#xff09; 超时代码&#xff1a; class Solution {public:int work1[110] {0};int work2[110] {0};bool divide(vector<vector<int>>& graph, int n){bool judge false;if(n > graph.size()){for(in…...

flutter 实现旋转星球

先看效果 planet_widget.dart import dart:math; import package:flutter/material.dart; import package:vector_math/vector_math_64.dart show Vector3; import package:flutter/gestures.dart; import package:flutter/physics.dart;class PlanetWidget extends StatefulW…...

Hotcoin Research | 市场洞察:2024年5月13日-5月19日

加密货币市场表现 目前&#xff0c;加密货币总市值为1.32万亿&#xff0c;BTC占比54.41%。 本周行情呈现震荡上行的态势&#xff0c;BTC在5月15日-16日&#xff0c;有一波大的拉升&#xff0c;周末为震荡行情。BTC现价为67125美元。 上涨的主要原因&#xff1a;美国4月CPI为3…...

kotlin基础之高阶函数

Kotlin中的高阶函数、内联函数以及noinline和crossinline关键字是函数式编程中的重要概念。下面我将逐一解释这些概念的定义、实现原理、使用场景以及noinline和crossinline关键字的具体用法。 高阶函数 定义&#xff1a;高阶函数是接受一个或多个函数作为参数&#xff0c;或…...

(Java企业 / 公司项目)配置Linux网络-导入虚拟机

公司给了我一个IP地址 &#xff0c;提供了一个虚拟机或者自己搭建虚拟机&#xff0c;还有提供登录的账号密码 可以查看我之前的文章 VMware Workstation Pro 17虚拟机超级详细搭建&#xff08;含redis&#xff0c;nacos&#xff0c;docker, rabbitmq&#xff0c;sentinel&…...