这是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. XMPP协议、IM、客户端互联详解

    导读 对于推送,IM服务器,目前可以使用一些厂家提供的SDK来实现,但是我们的老板又总是担心使用别人的SDK,假如别人的服务出现问题,或者别人偷看咱们的信息,那岂不是出现很大问题了 聊一聊xmpp的服 ...

  2. 16g u盘变 成1g u盘 解决方案,使用驱动器中的光盘之前需要将其格式化

    1\ 计算机----管理------磁盘管理  有一个黑色区域是未分配的 2\ 1)进入cmd 命令行窗口2)输入 diskpart,并回车.弹出系统提示,选是即可.3)输入 list disk,并回 ...

  3. 自定义强大的C#网络操作基础类(NetHelper)

    using System; using System.Text;using System.Net.Sockets;using System.Net.Mail;using System.Net; nam ...

  4. Balanced Lineup 倍增思想到ST表RMQ

      Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 36864   Accepted: 172 ...

  5. cocos2dx3.0-tinyxml在Android环境下解析xml失败的问题

    本文由@呆代待殆原创,转载请注明出处. 正常情况下,我们在用tinyxml读取xml文件的的时候,会像下面这样写. std::string filePath = FileUtils::getInsta ...

  6. Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  7. setcookie 之 我见

    $default_currency=get_default_currency(); $_COOKIE['currency'] = $default_currency['currency']; $_CO ...

  8. iOS 手势大全

    1.Touch事件 //系统自动调用 //一个UITouch代表一根手指 按住option变成两根手指 //虽然是两个手指,但只执行一次触摸事件 - (void)touchesBegan:(NSSet ...

  9. 强大的JQuery(一)--基础篇

    JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮. 学好了jquery,我们相当于 ...

  10. NIS客户端限制用户登录

    公司所有账号信息由一台 NIS Server 统一管理,但是有几台 NIS Client 只允许某几个用户登录.这里通过PAM机制来实现该需求. 1. 需要配置的文件 (/etc/pam.d/目录下) ...