默茉的博客

基于物理的渲染—HDR Tone Mapping在游戏引擎渲染管线中，我们对于R、G、B通道颜色信息的数值范围通常设置在[0,1]之间（或者是[0,255]）。其中，0代表没有光亮度，1代表显示器能够显示的最大光亮度。这个表示方式虽然直接易懂，但它并不能反映真实世界中光亮度的情况。在真实世界的光照环境中，光亮强度有时候会超过显示器能够显示的最大亮度。而且，人眼在观察真实世界的物体时，会根据光照强...

1. threex.geometricglow 地址threex.geometricglow is a three.js extension to make any object glow at geometric level. It is done at the geometry level. An important feature which provide multiple adva...

1.创建两个球体，一个一小，一个略大的作为他的辉光2.作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）3.将覆盖原物体的部分丢弃辉光效果var vertexShader = [ 'varying vec3 vVertexWorldPosition;', 'varying vec3 vVertexNormal;', 'varying vec4 v...

一.Git已经在你的系统中了，你会做一些事情来客户化你的Git环境。你只需要做这些设置一次；即使你升级了，他们也会绑定到你的环境中。你也可以在任何时刻通过运行命令来重新更改这些设置。      Git有一个工具被称为git config，它允许你获得和设置配置变量；这些变量可以控制Git的外观...

例子：https://threejs.org/examples/#webgl_loader_mmd

一、geometry=>buffergeomertyvar bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );threejs官方文档：https://threejs.org/docs/index.html#api/en/core/BufferGeometry.fromGeometry二，计算Ta...

截图：注：bufferGeomerty可以直接通过threejs的BufferGeometryUtils计算切线空间的顶点切线。

Three.js的渲染机制three的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离来控制和进行渲染的。对于透明的物体，则是按照从最远到最近的顺序进行渲染。也就是说，它根据物体的空间位置进行排序，然后根据这个顺序来渲染物体。如何控制渲染顺序？1.设置renderer.sortObjects = false;这样，物体的渲染顺序将会由他们添加到场景中的顺序所决定。适合大部...

例子：css2d_labelmoleculesConstructorCSS2DRenderer()Methods.getSize () : ObjectReturns an object containing the width and height of the renderer..render ( scene : Scene, camera : Camera ) : null...

明天我再来写。。。。。。

1.setInterval如果要设置特定的FPS（虽然严格来说，即使使用这种方法，JavaScript也不能保证帧数精确性）设定一次就可以，下面的函数意思是每隔16.7ms,渲染一帧。setInterval(animate, 16.7)2.requestAnimationFrame和setInterval不同的是，由于requestAnimationFrame只请求一帧画面，因此，除了...

Tween var twe = new TWEEN.Tween(sprite.position) .to({x:600}, time * 16.6) .easing(TWEEN.Easing.Exponential.InOut) ...

前面的话TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。本文将详细介绍tween.js的使用概述tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来...

屏幕坐标系屏幕坐标系，主要有两种，第一种：以左上角为原点。代表的操作系统有Windows，Android，Symbian，iOS 的Core Graphics如图1左侧。第二种：以左下角为原点。比如iOS的CGContextDrawImage，如图2右侧。webGL坐标系在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是...

原博客地址：https://blog.csdn.net/u013270347/article/details/81178737每个AnimationClip通常保存对象的某个活动的数据；每个动画属性的数据都存储在单独的KeyFrameTrack中；存储的数据形式仅仅是动画的基础-实际播放是由AnimationMixer动画混合器控制的;动画混合器本身只有很少的(一般的)属性和方法，因为它可以由A...

Clay Viewer（我只想说好用，直接可以导出gltf的二进制glb格式）链接其他的优化器：优化器我暂时用的是glTF Pipeline这个也挺好用的。

Three.js - 光源使用详解3（环境光 HemisphereLight、镜头光晕 LensFlare）1，基本介绍使用 THREE.HemisphereLight 可以创建更加贴近自然的户外光照效果。THREE.HemisphereLight 不会产生阴影。THREE.HemisphereLight 的优势：如果不使用 THREE.HemisphereLight，要模拟户外光照，通...

下面贴出如何加载的代码：引入jquery插件：<script src="r95/jquery-3.1.1.js"></script>初始化加载shader文件：function initglsl(){ var error = document.getElementById('error'); vertDeferred = $.aja...

缩放立方体网格模型x轴方向放大2倍，如果连续执行两次该语句，相等于比原来方法4倍 mesh.scale.x = 2.0;//x轴方向放大2倍立方体网格模型整体缩小0.5倍，相当于xyz三个方向分别缩小0.5倍 mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍网格模型Mesh的属性scale返回值是一个Vector3对象，查看three.js官方文档你...

Sprite精灵 Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，这样说明Sprtite（doc） : A sprite is a plane that always faces towards the camera , generally with a partially transparent texture applied.Sprit...

首发于H5游戏开发已关注写文章十分钟打造 3D 物理世界TH-Player前端开发​关注他12 人赞同了该文章前言在繁忙的业务中，为了缩短设计和开发的周期，我们的 H5 小游戏更多的会采用 2D 的视觉风格，但总是一个风格是很无趣的，所以最近搞了一个 3D 物理游戏的需求，在开发的过程中遇到了不少问题，希望通过这篇文章将关于 Three.js、Cannon.js、模型、工具等基础知识、问题总结分享...

有用的的threejs链接Three.js homepageThree.js documentationThree.js Google+TutorialsIntro to WegGL with Three.jsArticlesThe Hobbit Experience - a Good article to read up on three.js performance opt...

用gltf-pipeline对gltf模型进行压缩gltf-pipeline地址添加链接描述操作方法：Getting StartedInstall Node.js if you don’t already have it, and then:npm install -g gltf-pipelineUsing gltf-pipeline as a command-line tool:C...

常见的三个光照模型（1）漫反射与Lambert光照模型粗糙的物体表面向各个方向等强度地反射光，这种等同度地散射现象称为光的漫反射（Diffuse Reflection）。产生光的漫反射现象的物体表面称为理想漫反射体，也称为Lambert反射体。对于暴露在环境光下的Lambert反射体，可以用以下公式表示某点处的漫发射光强：Iad= KIa其中Ia表示环境光强度，k（0<k<1...

HLSL函数列表本表来自网络，我对说明做了些修改。NameSyntaxDescriptionabsabs(x)返回x的绝对值。对x的每个元素都会独立计算一次。Absolute value (per component).acosacos(x)返回x的反余弦值。对x的每个元素都会独立计算一次。Returns the arccosine of each co...

原博客地址：https://blog.csdn.net/hgl868/article/details/7876257  OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中，有些是针对固定硬件的，所以这部分只能用在某个特定的着色器上。     &am

1.设置后期处理设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。3）在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。要使用后期处理，需要引入一些javaSscr...

transparent（直接定义材料是否透明）官网解释：Defines whether this material is transparent（透明）. This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent obj...