这是html5中WebGL的演示，让我们与他人分享爱您发送短消息。每次你进入它使用不同的位置，新的爱情点被添加到全球。让世界更明亮的地方与你的朋友分享！

源文件：
部分代码：
<!DOCTYPE html>
<html>
<head>
        <title>Geolocation love</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/three.js"></script>

<script src="js/Detector.js"></script>
        <script src="js/Stats.js"></script>
        
        <script src="js/Tween.js"></script>
        
        <script src="js/ShaderExtras.js"></script>
        <script src="js/EffectComposer.js"></script>
        <script src="js/ShaderPass.js"></script>
        <script src="js/MaskPass.js"></script>
        <script src="js/RenderPass.js"></script>
        <script src="js/BloomPass.js"></script>
        <script src="js/FilmPass.js"></script>
        
        <script type="text/javascript" src="js/main.js"></script>
        
        <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container"></div>

<section class="box" id="messageBox">
                <div id="message">No matter where you are, always make the world brighter place</div>
                <div id="dist"></div>
                <div id="shareSwitcher"><a>Click to share your love with others!</a></div>
                <div id="likeIt"><a href="https://developer.mozilla.org/en-US/demos/detail/geolocation-love">Like this demo on DevDerby</a></div>
        </section>
        
        <section class="box" id="shareBox">
                <div id="form">
                        <h1>Type your message to the world</h1>
                        <textarea id="messageArea"> </textarea>
                        <input id="submitShare" type="button" value="get share link" />
                </div>
        </section>
</div>

</div>

<script type="x-shader/x-vertex" id="earthVertex">
varying vec3 vNormal;
varying vec2 vUv;
void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        vNormal = normalize( normalMatrix * normal );
        vUv = uv;
}
</script>
<script type="x-shader/x-fragment" id="earthFragment">
uniform sampler2D texture;
varying vec3 vNormal;
varying vec2 vUv;
void main() {
        vec3 diffuse = texture2D( texture, vUv ).xyz;
        float intensity = 1.15 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
        gl_FragColor = vec4( diffuse + atmosphere, 1.0 );
}
</script>

<script type="x-shader/x-vertex" id="atmosphereVertex">
varying vec3 vNormal;
void main() {
        vNormal = normalize( normalMatrix * normal );
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script type="x-shader/x-fragment" id="atmosphereFragment">
varying vec3 vNormal;
void main() {
        float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 10.0 );
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;
}
</script>
</body>
</html>

详细说明：http://html5.662p.com/thread-9-1-1.html

这是html5中WebGL的演示的更多相关文章

  1. Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

    Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...

  2. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  3. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  4. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  5. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  6. 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...

  7. 基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化

    前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...

  8. 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

    前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...

  9. 使用HTML5中postMessage 实现ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

随机推荐

  1. MYSQL 5.7 主从复制 -----GTID说明与限制 原创

    http://www.cnblogs.com/cenalulu/p/4309009.html http://txcdb.org/2016/03/%E7%B3%BB%E7%BB%9F%E8%A1%A8- ...

  2. android学习日记13--数据存储之ContentProvide

    3.ContentProvider 数据在Android当中是私有的,当然这些数据包括文件数据和数据库数据以及一些其他类型的数据.ContentProvider实现多应用程序间的数据共享类一般利用Co ...

  3. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 2.全局防护Bypass之UrlDecode

    0x01 背景 现在的WEB程序基本都有对SQL注入的全局过滤,像PHP开启了GPC或者在全局文件common.php上使用addslashes()函数对接收的参数进行过滤,尤其是单引号.遇到这种情况 ...

  4. 源码-hadoop1.1.0-core-org.apache.hadoop

    按包的顺序类的顺序来吧,因为我不懂hadoop类的具体体系和类之间的联系,如果有一定知识积累的可以看下别人写的hadoop源码解读类的书,类似的有 http://pan.baidu.com/s/1i3 ...

  5. C语言第七节流程控制

    流程控制 顺序结构:默认的流程结构.按照书写顺序执行每一条语句. 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码. 循环结构:在给定条件成立的情况下,反复执行某一段代码.     ...

  6. MySQL（22）：事务管理之 事务回滚

    1. 在操作事务的时候,如果发现当前事务操作是不合理的,此时只要还没有提交事务,就可以通过回滚取消当前事务,接下来就针对事务的回滚进行详细讲解. 2. 为了演示回滚操作,在上一个笔记案例基础之上,此时 ...

  7. 【Android 界面效果13】关于全屏和取消标题栏

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 去掉标题栏: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Wi ...

  8. 页面 Backspace 功能禁锢

    var flag=false; window.document.onkeydown = function keyDown() { if(event.keyCode==8){ event.returnV ...

  9. VMware系统运维（十四）部署虚拟化桌面 Horzion View Manager 5.2 配置许可

    1.通过网页访问https://conntionserver.testad.local/admin,打开如下图所示页面:输入用户名密码 2.进来以后配置View 许可,点击"编辑许可证&qu ...

  10. php用curl获取远端网页内容

    <?php $url="http://www.baidu.com";$cc=curl_init(); curl_setopt($cc,CURLOPT_URL,$url); c ...