WebGL模型拾取——射线法】的更多相关文章

今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转,平移.为了能做到鼠标交互,就首先要能选中场景中的模型对象,这就要用到模型拾取算法,本文仅讨论射线法模型拾取raycaster. 所谓射线法就是利用一根射线去和场景中的模型进行碰撞,撞到的模型对象就是被拾取到的模型.请看下图 我逐个来解释一下上图中的元素.首先解释相机(camera),这就是人眼的抽象…
这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方.首先我们来看下图. 我来解释一下上图中的originTriangle,这就是Triangle2三角形第一次绘制在空间中的位置,而Triangle2当前的位置是经过一系列空间变换而来的(这些位置姿态变换大多是由用户鼠标交互产生),变换矩阵就是transformMatrix.这下就引出了本文第一个重点,那就是做raycaster的时候要保证线段碰撞模型的时候…
原文详见http://away3d.com/tutorials/Introduction_to_Mouse_Picking.本文若有翻译不对的地方,敬请指出. 本教程详细介绍了Away3D 4.x中鼠标交互问题. 内容: n  介绍 n  Hello Picking n  Entity属性 n  View属性 n  UV绘制 n  总结 介绍 每个3D引擎都需要解决一个非常基础的问题:鼠标下面是什么?在3D图形学中,这通常会涉及到拾取.虽然这个问题看似简单.直接,但它实际上涉及到较难的数学和非常…
依然是计算几何. 射线法判断点与多边形关系原理如下: 从待判断点引出一条射线,射线与多边形相交,如果交点为偶数,则点不在多边形内,如果交点为奇数,则点在多边形内. 原理虽是这样,有些细节还是要注意一下,比如射线过多边形顶点或射线与多边形其中一边重合等情况还需特别判断. 这里就不特别判断了,因为我只是熟悉原理,并不是实际运用. 好吧,我实际是太懒了,不想判断了. 结果如下: 结果图和线性分类器的组合有几分相似. matlab代码如下: clear all;close all;clc; polyn=…
题目链接:http://lightoj.com/volume_showproblem.php?problem=1190 题意:给你一个多边形含有n个点:然后又m个查询,每次判断点(x, y)是否在多边形的内部; 射线法判断即可适用于任何(凸或凹)多边形;时间复杂度为O(n); 判断一个点是在多边形内部,边上还是在外部,时间复杂度为O(n):射线法可以正确用于凹多边形: 射线法是使用最广泛的算法,这是由于相比较其他算法而言,它不但可以正确使用在凹多边形上,而且不需要考虑精度误差问题.该算法思想是从…
题目:http://lightoj.com/volume_showproblem.php?problem=1190 参考链接:https://blog.csdn.net/gkingzheng/article/details/81836308 http://www.mamicode.com/info-detail-1555428.html 一.比如说,我就随便涂了一个多边形和一个点,现在我要给出一种通用的方法来判断这个点是不是在多边形内部(别告诉我用肉眼观察……). 首先想到的一个解法是从这个点做…
You have a map as a rectangle table. Each cell of the table is either an obstacle, or a treasure with a certain price, or a bomb, or an empty cell. Your initial position is also given to you. You can go from one cell of the map to a side-adjacent one…
Revit API提供根据射线来寻找经过的元素.方法是固定模式,没什么好说.关键代码:doc.FindReferencesWithContextByDirection(ptStart, (ptEnd - ptStart), view3d) );         XYZ ptEnd = curve.get_EndPoint();         , , 0.01);//向量偏移的方法,这里向下偏移.         ptStart = ptStart - offset;         ptEnd…
[BZOJ1294][SCOI2009]围豆豆Bean Description Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别为每颗豆子的分值. 接着N行有一个N×M的字符矩阵来描述游戏矩阵状态,0表示空格,#表示障碍物.而数字1到9分别表示对应编号的豆子. Output 仅包含一个整数,为最高可能获得的分值. Sample Input 3 8 3 30 -100 30 00000000 010203#0 00000000…
124. Broken line time limit per test: 0.25 sec. memory limit per test: 4096 KB There is a closed broken line on a plane with sides parallel to coordinate axes, without self-crossings and self-contacts. The broken line consists of K segments. You have…
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1656 题意: 给你一个n*m的地图,'.'表示空地,'X'表示树林,'*'表示起点. 所有'X'为一个连通块. 对于每一个点,你可以向周围八个方向走,均算作一步. 让你找出一条路径,能够将所有'X'包围. 问你路径最短为多少. 题解: bfs + 射线法. 找出最上面(x坐标最小)的一个'X',并向上方作一条射线,标记为'#'. 从起点开始bfs,并且不能穿过射线(即'#'不能到达).…
The Grove Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 904   Accepted: 444 Description The pasture contains a small, contiguous grove of trees that has no 'holes' in the middle of the it. Bessie wonders: how far is it to walk around t…
感谢原作者,原理请看原作者的文章 http://www.html-js.com/article/1517 C#实现 public string rayCasting(PointF p, PointF[] poly) { var px = p.X; var py = p.Y; var flag = false; int l = poly.Length; ; ; i < l; i++) { var sx = poly[i].X; var sy = poly[i].Y; var tx = poly[j…
题意: 给一个地图,给定起点和一块连续图形,走一圈围住这个图形求最小步数 本来是要做课件上一道$CF$题,先做一个简化版 只要保证图形有一个点在走出的多边形内就可以了 $hzc:$动态化静态的思想,假设已经有了路线怎么判断合法 点在多边形内是“点变多边形不变”,我们反过来维护多边形变 $f[i][j][0/1]$表示当前走到$(i,j)$,点是否在多边形内 维护一条向右发出的射线,每次走的时候看看有没有穿过射线就行了 因为这是个网格,我们可以规定只有从上面经过才算穿过 然后,这不是$DAG$啊怎…
class Point: lng = '' lat = '' def __init__(self, lng, lat): self.lng = lng self.lat = lat # 求外包矩形 def get_polygon_bounds(points): length = len(points) top = down = left = right = points[0] for i in range(1, length): if points[i].lng > top.lng: top =…
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2018-10-07 15:49:37 # @Author : Sheldon (thisisscret@qq.com) # @Blog : 谢耳朵的派森笔记 # @Link : https://www.cnblogs.com/shld/ # @Version : 0.0.1 def isinpolygon(point,vertex_lst:list, contain_boundary…
1294: [SCOI2009]围豆豆Bean Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 458  Solved: 305[Submit][Status][Discuss] Description Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别为每颗豆子的分值. 接着N行有一个N×M的字符矩阵来描述游戏矩阵状态,0表示空格,#表示障碍物.而数字1到9分别表示对应编号的豆…
1656: [Usaco2006 Jan] The Grove 树木 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 186  Solved: 118[Submit][Status][Discuss] Description The pasture contains a small, contiguous grove of trees that has no 'holes' in the middle of the it. Bessie wonders…
C - Circling Round Treasures 题意: 在一个$n*m$的地图上,有一些障碍,还有a个宝箱和b个炸弹.你从(sx,sy)出发,走四连通的格子.你需要走一条闭合的路径,可以自交,且围出来的复杂多边形内不能包含任何炸弹.你围出来的复杂多边形中包含的宝箱的价值和减去步数就是你的收益.求最大收益.$n,m \le 20,a + b \le 8$ 太坑了课件上的题意有问题一开始没说步数... 后来改上然后$inq[][][]$最后没从$2$改成$S$然后我就看着玄学的$inq$好…
一.在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象? 二.射线法确定步骤及代码 //Three.js提供一个射线类Raycaster来拾取场景里面的物体.更方便的使用鼠标来操作3D场景. //从某个方向发射一条射线,穿过鼠标所在的点,则这条射线经过的对象就是鼠标点击的对象 //射线法获取鼠标选择的元素,然后修元素的材质. var raycaster = new THREE.Raycaster(); //mouse,鼠标所对应的二维向量,监听鼠标移动事件 //mou…
转载:https://www.cnblogs.com/jasonfreak/p/5448385.html 特征选择主要从两个方面入手: 特征是否发散:特征发散说明特征的方差大,能够根据取值的差异化度量目标信息. 特征与目标相关性:优先选取与目标高度相关性的. 对于特征选择,有时候我们需要考虑分类变量和连续变量的不同. 1.过滤法:按照发散性或者相关性对各个特征进行评分,设定阈值或者待选择阈值的个数选择特征 方差选择法:建议作为数值特征的筛选方法 计算各个特征的方差,然后根据阈值,选择方差大于阈值…
本文以Fast, Minimum Storage Ray Triangle Intersection为参考,在此感谢原作者,大家也可以直接阅读原版. 概述 射线和三角形的相交检测是游戏程序设计中一个常见的问题,最典型的应用就是拾取(Picking),本文介绍一个最常见的方法,这个方法也是DirectX中采用的方法,该方法速度快,而且存储空间少.先讲述理论,然后给出对应的代码实现.          理论部分 一个直观的方法 我想大多数人在看到这个问题时,可能都会想到一个简单而直观的方法:首先判断…
1.问题 three.js中模型选中使用的是射线法,根据摄像机角度,鼠标点击位置和模型选中的distance参数判断来选中模型.对于原生的矢量模型完全没有问题,但是当遇到导入的外部模型,如obj.stl等的时候,就发现完全选中不了,本文就如果解决选中外部模型和原生模型问题进行解决. 先说说射线法,参考文章:https://blog.csdn.net/qq_30100043/article/details/79054862 (图片偷自:https://segmentfault.com/a/1190…
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取 代码工程地址: https://github.com/jiabaodan/Direct12BookReadingNotes 学习目标 学习如何实现拾取算法,我们将它分解为下面几个步骤: 当点击屏幕上s点时,计算对应的透视窗口上的点p: 在视景坐标系下计算拾取射线: 将射线和要进行检测的模型变换到同一个坐标系下: 检测模型是否和射线相交,取深度值最小的那…
参考文章 深入探索3D拾取技术 OpenGL 3D拾取 射线和三角形的相交检测(ray triangle intersection test) 3D拾取的方法有两种 1.基于几何计算的射线-三角形相交法 2.使用OpenGL本身的拾取机制 这里主要使用第二种,理解起来相对简单一点. 借用大佬的通俗易懂的说法,这种方法的本质就是: 把每个三角形的id作为材质渲染到屏幕上,很容易就能找到鼠标对应的颜色值.这样多少三角形都能正确得到. 完全不用进行数学计算. 优点在于减少了大量不必要的计算开销——只对…
1.问题 three.js中模型选中使用的是射线法,根据摄像机角度,鼠标点击位置和模型选中的distance参数判断来选中模型.对于原生的矢量模型完全没有问题,但是当遇到导入的外部模型,如obj.stl等的时候,就发现完全选中不了,本文就如果解决选中外部模型和原生模型问题进行解决. 先说说射线法,参考文章:https://blog.csdn.net/qq_30100043/article/details/79054862 2.选中原生矢量模型 直接上代码: function click(e){…
上一节链接:http://www.cnblogs.com/zjutlitao/p/4116783.html 前言: 在上一节中我们已经大致介绍了该软件的是什么.可以干什么以及界面的大致样子.此外还详细地介绍了Bresenham直线扫描算法的核心思想及实现,并在最终在2-1小节引出工程中对于该算法具体的实现.本节将着手讲解多边形填充算法. 二.承接上篇 2-1.多边形扫描转换 把顶点表示转换为点阵表示:①从多边形的给定边界出发,求出其内部的各个像素:②并给帧缓冲器中各个对应元素设置相应灰度或颜色 …
一.总述 当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来,这种工作模式比较适合3D设计师和3D程序员分工配合的场景.但对于单兵作战的WebGL爱好者来讲这种模式过于沉重:且不说转化插件本身存在的各种bug严重降低了转化的成功率,光是为了生成一个简单的模型就需要系统的学习3DsMax或Blender的使用方法就让人感觉得不偿失. 基于以上考虑,我计划编写一个基于Babylonjs的简单WebGL模型编辑器,供自己和其他有同样需求的WebGL爱好者使用.编辑器…
哎呀?为什么我设置了节点点击回调没反应呀? 记得在写小鸡拍拍的时候遇到一个问题,想要捕捉排球的点击事件,按照 2d 的写法,给3d 节点添加 node 事件,结果点了没反应.代码大概是以下的样子. this.node_volleyball.on(Node.EventType.TOUCH_START, () => { console.log('不可能看见我') }, this); 后来在论坛上找了个方法,稀里糊涂的写上去就完事了. 但是,最近我把版本升级到 v1.0.1 之后,发现之前的方法不管用…
前端开发中,hover是最常见的鼠标操作行为之一,用起来也很方便,CSS直接提供:hover伪类,js可以通过mouseover+mouseout事件模拟,甚至一些第三方库/框架直接提供了 hover API ,比如 jQuery 的 hover() 函数.大部分前端开发者在使用这些很方便的方法时,可能并没有思考过 hover 背后的实现原理. hover 是跟 DOM 绑定的,常规 DOM 是一个个矩形(CSS 盒模型),鼠标移动时浏览器需要判断鼠标指针坐标是否在这个 DOM 的矩形范围之内,…