By Daniel Du
I am documenting my learning process of webGL here, so you may find similar code snippet somewhere else. My purpose is to display Civil 3D surface in web page without any plug-ins. WebGL is a good way to do this. Many libraries make life easier for WebGL programming, Three.JS is one of them.
Firstly we need to choose a "right" browser, as not all browsers support WebGL right now. My colleague Partha published a test webGL in this post, if you cannot see it, your browser may do not support WebGL. If you are using IE, you may need to try Firefox or Chrome. If you are using latest version of FireFox or Chrome, please check following to enable WebGL for browser :
For FireFox:
- Input "about:config" in adress
- Search "WebGL" in filter
- Set "webgl.force-enabled" to true;
- Set "webgl.disabled" to false;
- Search “security.fileuri.strict_origin_policy” in filter
- Set "security.fileuri.strict_origin_policy" to false
- Close all Tab and restart firefox.
For Chrome, I created a new shortcut as below :
"ChromePath\chrome.exe" --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
For Civil 3D TinSurface, it is composed of many triangular facet, so in this post, I will firstly to create a simple prototype to verify the feasibility. I will try to create some simple triangles with WebGL. First step is to create a web page, it can be a simplest HTML or an ASPX for asp.net. You can use your favorite notepad editor, I am using Visual Studio here, it is pretty good to me with some code intelligence. I go ahead to create an ASP.NET website, and add Three.JS to the project. This file can be found from Three.JS website, if you downloaded the source code from Github, this file can be found in \build folder. Then I added a DIV tag and script reference to in web page.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebGLStudy1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/three.js" type="text/javascript"></script>
<script src="Scripts/three.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<h2>
Show Civil 3D Surface below:
</h2>
<div id="container" style="border-style: none; border-color: inherit; border-width: medium;
height: 500px; background-color: #808000;">
</div>
<script type="text/javascript">
window.onload = function () {
// alert(“hello”);
}
</script>
</asp:Content>
Basically, here are the steps to add a webGL with Three.JS in a web page, initialize a renderer, initialize a scene, add a camera, add some objects, then render the scene. First step, iniliazieer a renderer:
var renderer;
var initThree = function () {
var container = document.getElementById("container");
width = container.clientWidth;
height = container.clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}
Next is to add a carmera:
var camera;
var initCamera = function () {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 5000);
camera.position.x = 0;
camera.position.y = 50;
camera.position.z = 100;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({ x: 0, y: 0, z: 0 });
}
Now it is time to create a scene and add a light to it:
//set a scene
var scene;
var initScene = function () {
scene = new THREE.Scene();
}
// set light
var light;
var initLight = function () {
light = new THREE.DirectionalLight(0xff0000, 1.0, 0);
light.position.set(200, 200, 200);
scene.add(light);
}
Okay, next step is to add some objects to the scene, Thress.Js has many built-in objects, like sphere, cube, torus, etc., but for me, I would like to display Civil 3D TinSurface, which is composed of small triangles, I have to use the common geomtry to create the simplest triangle. This link helps me a lot. We need the coordinates of vertexes of the triangle, please note that the order should be counter clock-wise.
var geometry = new THREE.Geometry(200, 200, 200);
var v1 = new THREE.Vector3(100, 0, 0); // Vector3 used to specify position
var v2 = new THREE.Vector3(-100, 0, 0);
var v3 = new THREE.Vector3(0, 100, 0); // 2d = all vertices in the same plane.. z = 0
// Push vertices represented by position vectors
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);
// Push face, defined with vertices in counter clock-wise order
geometry.faces.push(new THREE.Face3(0, 2, 1));
// Create a material and combine with geometry to create our mesh
var redMat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle);
Finally render the scene and set it up in window.onload().
var render = function () {
renderer.render(scene, camera);
}
//execute
var threeStart = function () {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
window.onload = function () {
threeStart();
}
With that, I can draw a simplese triangle on web page, so next step is to add more triangles into the scene to combine the TinSurface. I will continue in next post.
(screen-shot)
Subscribe
Comments