Anders Ohlsson 이 파이어 몽키로 만든 공학계산 결과 그래프 입니다.

보기만 해도 멋지군요 


Abstract: This article discusses how you can generate your own 3-dimensional mesh for visualizing mathematical functions using Delphi XE2 and FireMonkey.

    Prerequisites!

This article assumes that you are familiar with the basics of 3D graphics, including meshes and textures.

    The goal!

The goal is to graph a function like sin(x*x+z*z)/(x*x+z*z) in three dimensions using brilliant colors, as the image below shows:

Hide image
Click to see full-sized image

    Generating the mesh

The easiest way to generate a mesh is to use the Data.Points and Data.TriangleIndices of the TMesh object. However, these two properties are strings, and they get parsed in order to generate the mesh at runtime (and design time if populated at design time). This parsing is pretty time consuming, in fact, in this particular case about 65 times as slow as using the internal buffers. Therefore we will instead be using the non-published properties Data.VertexBuffer and Data.IndexBuffer.

In our example we will iterate along the X-axis from -30 to +30, and the same for the Z-axis. The function we're graphing gives us the value for Y for each point.

    Step 1: Generating the wire frame

The image below shows a sparse wire frame representing the surface f = exp(sin x + cos z). Shown in red is one of the squares. Each square gets split into two triangles in order to generate the mesh. The mesh is simply built up from all of the triangles that we get when we iterate over the XZ plane.

Hide image
Click to see full-sized image

We name the corners of the square P0, P1, P2 and P3:

Hide image
Triangles

The two triangles now become (P1,P2,P3) and (P3,P0,P1).

Given that u is somewhere on the X-axis, v is somewhere on the Z-axis, and that d is our delta step, the code to set up these four points in the XZ-plane becomes:

P[0].x := u;
P[0].z := v;

P[1].x := u+d;
P[1].z := v;

P[2].x := u+d;
P[2].z := v+d;

P[3].x := u;
P[3].z := v+d;

Now we calculate the corresponding function values for the Y component of each point. f is our function f(x,z).

P[0].y := f(P[0].x,P[0].z);
P[1].y := f(P[1].x,P[1].z);
P[2].y := f(P[2].x,P[2].z);
P[3].y := f(P[3].x,P[3].z);

The points are now fully defined in all three dimensions. Next, we plug them into the mesh.

with VertexBuffer do begin
  Vertices[0] := P[0];
  Vertices[1] := P[1];
  Vertices[2] := P[2];
  Vertices[3] := P[3];
end;

That part was easy. Now we need to tell the mesh which points make up which triangles. We do that like so:

// First triangle is (P1,P2,P3)
IndexBuffer[0] := 1;
IndexBuffer[1] := 2;
IndexBuffer[2] := 3;

// Second triangle is (P3,P0,P1)
IndexBuffer[3] := 3;
IndexBuffer[4] := 0;
IndexBuffer[5] := 1;

    Step 2: Generating the texture

In order to give the mesh some color, we create a texture bitmap that looks like this:

HSLmap

This is simply a HSL color map where the hue goes from 0 to 359 degrees. The saturation and value are fixed.

The code to generate this texture looks like this:

BMP := TBitmap.Create(1,360); // This is actually just a line
for k := 0 to 359 do
  BMP.Pixels[0,k] := HSLtoRGB(k/360,0.75,0.5);

    Step 3: Mapping the texture onto the wire frame

Finally, we need to map the texture onto the mesh. This is done using the TexCoord0 array. Each item in the TexCoord0 array is a point in a square (0,0)-(1,1) coordinate system. Since we're mapping to a texture that is just a line, our x-coordinate is always 0. The y-coordinate is mapped into (0,1), and the code becomes:

with VertexBuffer do begin
  TexCoord0[0] := PointF(0,(P[0].y+35)/45);
  TexCoord0[1] := PointF(0,(P[1].y+35)/45);
  TexCoord0[2] := PointF(0,(P[2].y+35)/45);
  TexCoord0[3] := PointF(0,(P[3].y+35)/45);
end;

    Putting it all together

The full code to generate the entire mesh is listed below:

function f(x,z : Double) : Double;
var
  temp : Double;
begin
  temp := x*x+z*z;
  if temp < Epsilon then
    temp := Epsilon;

  Result := -2000*Sin(temp/180*Pi)/temp;
end;

procedure TForm1.GenerateMesh;
const
  MaxX = 30;
  MaxZ = 30;
var
  u, v : Double;
  P : array [0..3] of TPoint3D;
  d : Double;
  NP, NI : Integer;
  BMP : TBitmap;
  k : Integer;
begin
  Mesh1.Data.Clear;

  d := 0.5;

  NP := 0;
  NI := 0;

  Mesh1.Data.VertexBuffer.Length := Round(2*MaxX*2*MaxZ/d/d)*4;
  Mesh1.Data.IndexBuffer.Length := Round(2*MaxX*2*MaxZ/d/d)*6;

  BMP := TBitmap.Create(1,360);
  for k := 0 to 359 do
    BMP.Pixels[0,k] := CorrectColor(HSLtoRGB(k/360,0.75,0.5));

  u := -MaxX;
  while u < MaxX do begin
    v := -MaxZ;
    while v < MaxZ do begin
      // Set up the points in the XZ plane
      P[0].x := u;
      P[0].z := v;
      P[1].x := u+d;
      P[1].z := v;
      P[2].x := u+d;
      P[2].z := v+d;
      P[3].x := u;
      P[3].z := v+d;

      // Calculate the corresponding function values for Y = f(X,Z)
      P[0].y := f(Func,P[0].x,P[0].z);
      P[1].y := f(Func,P[1].x,P[1].z);
      P[2].y := f(Func,P[2].x,P[2].z);
      P[3].y := f(Func,P[3].x,P[3].z);

      with Mesh1.Data do begin
        // Set the points
        with VertexBuffer do begin
          Vertices[NP+0] := P[0];
          Vertices[NP+1] := P[1];
          Vertices[NP+2] := P[2];
          Vertices[NP+3] := P[3];
        end;

        // Map the colors
        with VertexBuffer do begin
          TexCoord0[NP+0] := PointF(0,(P[0].y+35)/45);
          TexCoord0[NP+1] := PointF(0,(P[1].y+35)/45);
          TexCoord0[NP+2] := PointF(0,(P[2].y+35)/45);
          TexCoord0[NP+3] := PointF(0,(P[3].y+35)/45);
        end;

        // Map the triangles
        IndexBuffer[NI+0] := NP+1;
        IndexBuffer[NI+1] := NP+2;
        IndexBuffer[NI+2] := NP+3;
        IndexBuffer[NI+3] := NP+3;
        IndexBuffer[NI+4] := NP+0;
        IndexBuffer[NI+5] := NP+1;
      end;

      NP := NP+4;
      NI := NI+6;

      v := v+d;
    end;
    u := u+d;
  end;

  Mesh1.Material.Texture := BMP;
end;

    Demo application

You can find my demo application that graphs 5 different mathematical functions in CodeCentral. Here are a few screen shots from the application:

Func1Hide image
Click to see full-sized imageHide image
Click to see full-sized imageHide image
Click to see full-sized imageHide image
Click to see full-sized image

    Contact

Please feel free to email me with feedback to aohlsson at embarcadero dot com.



원본링크


http://edn.embarcadero.com/article/42007


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 15439
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13961
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16499
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22055
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23268
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18923
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39255
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174699
623 [추가된 문법 정리] - 클래스 메소드(Class Method):델파이 2007 추가 관리자 2016.06.03 1280
622 [추가된 문법 정리] - 클래스 필드(Class Field):델파이 2007 추가 관리자 2016.06.03 828
621 [발표자료] 20160602 Upgrade VCL! 오래된 프로그램, 최신식으로 탈바꿈하기 관리자 2016.06.02 789
620 [베를린] GetIt 속성값을 별도의 옵션창에서 관리할 수 있습니다. 관리자 2016.05.30 336
619 [베를린] Eddystone 비콘을 사용할 수 있습니다. 관리자 2016.05.30 333
618 [베를린] 윈도우10에서 블루투스LE와 비콘을 활용할 수 있습니다. 관리자 2016.05.30 980
617 이 달의 기술자료 - 2016년 06월 file 험프리 2016.05.27 632
616 [업데이트][핫픽스][10.1 베를린] 갤럭시 S7 Edge(안드로이드 6.0.1) 디버깅이 되지않는 이슈 패치 험프리 2016.05.27 676
615 10.1 베를린 부터는 리본 컨트롤을 겟잇 패키지 매니저에서 설치할 수 있습니다. 험프리 2016.05.27 514
614 코드사이트(CodeSite)로 로그를 기록하며 프로그램의 문제를 파악할 수 있습니다. file 험프리 2016.05.26 2689
613 브레이크 포인트를 설정해도 디버깅이 안되는 경우 살펴볼 항목 file 험프리 2016.05.13 2806
612 [발표자료] 20160504 새로 강화된 기능들: RAD Studio, Delphi, C++Builder 관리자 2016.05.09 486
611 [베를린] TBufferedFileStream을 이용해 TFileStream 보다 더 빠르게 파일을 읽고, 쓸수 있습니다. file 험프리 2016.05.09 3083
610 [필독] Berlin Dialog 사용법 상당부분 변경 및 기능추가 (소스링크추가) [1] c2design 2016.05.04 858
609 [업데이트][핫픽스][10.1 베를린] 데이터스냅(DataSnap) ApplyUpdates 핫픽스 험프리 2016.04.28 870
608 이 달의 기술자료 - 2016년 05월 file 험프리 2016.04.26 658
607 [베를린] 스타일 디자이너에 미리보기, 클립보드 기능등이 강화되어 더욱 사용하기 편리해 졌습니다. file 험프리 2016.04.26 853
606 [베를린] 연락처 컴포넌트(TAddressBook)로 연락처 정보를 읽고 쓸수 있습니다. file 험프리 2016.04.25 620
605 [베를린] ListView 레이아웃을 입맛에 맞게 변경할 수 있습니다. file 험프리 2016.04.22 2125
604 [베를린] FireUI 앱 미리보기 - 개발중인 앱의 디자인을 장치에서 실시간으로 확인하며 개발할 수 있습니다. file 험프리 2016.04.22 1119