反锯齿

反锯齿本来是在threejs中比较容易的，加上{ antialias: true,alpha :true} 以后确实效果好很多，但是问题是很多都是要用后期处理来做这个场景，而懂得opengl的人知道后期处理使用离屏表面来做的，和实时渲染的参数不一致，这样可能就使用FXAAShaderPass 等去做，最好是用glsl语言去做了。

raser如何计算

在鼠标的点击事件中，计算二维或者三维变量vector: mouse
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

如何计算的，以下是其推导过程：
假定鼠标点击的点为 (x,y), 则 (x,y) = (e.clintX, e.clientY)
设该点在opengl坐标中的坐标值为 (x’,y’);那么怎么计算该值呢？

在浏览器中点的坐标值原点以屏幕左上角为(0,0)点，要推导以屏幕中心为原点的鼠标点击值的计算公式为：
x = x1 - innerWidth/2
y = innerHeight/2 - y1
x1,y1 为当时鼠标点下去的点。

一般来说opengl世界坐标的范围是[-1,1],当然，学过opengl基础的人知道，其实这个值只是归一化，并不一定是这样子，归一化有很多好处，这里不一一说明，把计算所得的x，y归一化，我们将得到
x’ = (x1 -innerWidth/2)/(innerwidth/2) = (x1/innerWidth)*2-1
*y’ = -(y1/innerHeight)2 +1

发光

点击某个物体发光，如何做？

 function outlineObj() {var width = window.innerWidth; //全屏状态对应窗口宽度var height = window.innerHeight; //全屏状态对应窗口高度composer = new THREE.EffectComposer(renderer); // 特效组件var renderPass = new THREE.RenderPass(scene, camera);composer.addPass(renderPass); // 特效渲染outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);composer.addPass(outlinePass); // 加入高光特效outlinePass.pulsePeriod = 2; //数值越大，律动越慢outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色outlinePass.usePatternTexture = false; // 使用纹理覆盖？outlinePass.edgeStrength = 5; // 高光边缘强度outlinePass.edgeGlow = 1; // 边缘微光强度outlinePass.edgeThickness = 1; // 高光厚度outlinePass.selectedObjects = selectedObjects; // 需要高光的obj}

鼠标点击事件：

 document.onmousedown = function (event) {// make sure we don't access anything elseevent.preventDefault();// get the mouse positionsvar mouse_x = (event.clientX / window.innerWidth) * 2 - 1;var mouse_y = -(event.clientY / window.innerHeight) * 2 + 1;// get the 3D position and create a raycastervar vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);vector.unproject(camera);var raycaster = new THREE.Raycaster(camera.position,vector.sub(camera.position).normalize());var intersects = raycaster.intersectObjects(scene.children);//outlineObj(intersects[0].object);if(intersects){console.log(intersects[0].object);selectedObjects.length =0;selectedObjects.push(intersects[0].object);//outlineObj(selectedObjects);}}

效果

效果就是点击哪个哪个发光，后面会使用glsl语言来做

threejs 反锯齿，raser，特效发光相关推荐

（转）完美画质 3D游戏反锯齿技术浅析 .
完美的画面已经离我们不再遥远--反锯齿技术浅析不管现今的游戏画面有多完美,人物和环境有多真实,但游戏画面的构成的主要方式仍然没有得到改善:一帧画面由成千上万像素构成.这意味着物体多边形的轮廓最终是锯 ...
linux netbeans 中文乱码,浅谈Linux Netbeans字体反锯齿处理
用的Linux发行版是Ubuntu8.04,如果使用源里面的JDK一切都很简单(现在源里的版本是1.6u6),JDK6开始支持反锯齿.装完Netbeans你就会惊喜的发现,仿原生GUI的界面(GTK+ ...
Ubuntu 8.04下Netbeans的字体反锯齿解决(转)
原帖地址:http://www.oklinux.cn/html/Basic/jyjq/20081011/62034.html 测试可用,网上搜的其他方法如复制字体文件等都不成功. 首先说明,我是被锯齿 ...
html5 canvas消除锯齿,HTML5 Canvas 如何取消反锯齿绘图
一.问题的提出我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...
html5 canvas消除锯齿,HTML5 Canvas 如何取消反锯齿绘图
原文出自:http://blog.csdn.net/cheungmine/article/details/7053455 一.问题的提出我们都知道反锯齿(anti-aliasing)绘图给我们带来更 ...
3DMark将加入DLSS 测试人工智能强化反锯齿效果
2019独角兽企业重金招聘Python工程师标准>>> 3DMark是由UL公司推出的显示效能测试软件,其中的Port Royal项目在先前已加入光线追踪测试功能,如今又新增支持DL ...
关于 AlphaBlend 和 32bpp 的反锯齿图标
原文地址::http://www.haogongju.net/art/840107 相关网帖 1.DirectDraw版的AlphaBlend----http://www.haogongju.net/ ...
canvas像素操作取色器写入像素数据缩放和反锯齿保存图片
博客简介 HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中.这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Can ...
Qt：Qt实现具有反锯齿的圆角窗口：不规则窗口
@import url(http://www.cppblog.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHi ...

threejs 反锯齿，raser，特效发光

反锯齿

raser如何计算

发光

效果

threejs 反锯齿，raser，特效发光相关推荐

最新文章

热门文章